@salesforcedevs/dx-components 1.3.66 → 1.3.71

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.66",
+    "version": "1.3.71",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "f20982f83f9a0eeaf9b4dcbcd48396af8c341736"
+    "gitHead": "2189b873b414cccf79905cf0b1401db76abbd9d0"
 }

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -85,14 +85,16 @@ export default class Breadcrumbs extends LightningElement {
         breadcrumbs: Breadcrumb[]
     ): NormalizedBreadcrumb[] {
         const { length } = breadcrumbs;
-        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
-            const last = i === length - 1;
-            return {
-                ...breadcrumb,
-                asLink: this.hideCurrentLocation || !last,
-                last
-            };
-        });
+        return breadcrumbs.map(
+            (breadcrumb, i): NormalizedBreadcrumb => {
+                const last = i === length - 1;
+                return {
+                    ...breadcrumb,
+                    asLink: this.hideCurrentLocation || !last,
+                    last
+                };
+            }
+        );
     }
 
     private get breadcrumbDropdownOptions() {

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -24,7 +24,7 @@ export default class CardBlogPost extends LightningElement {
         const payload = {
             click_text: this.title,
             click_url: this.href,
-            element_title: "dx-card-blog-post",
+            element_title: this.title,
             element_type: "card",
             content_category: "link"
         };

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -37,12 +37,12 @@ export default class CardCallout extends LightningElement {
             elementType: "card callout",
             destinationType: "internal"
         });
-        track(e.currentTarget!, "custEv_linkClick", {
+        track(e.currentTarget!, "custEv_ctaLinkClick", {
             click_text: this.title,
             click_url: this.href,
-            element_title: "dx-card-callout",
-            element_type: "card",
-            content_category: "link"
+            element_title: this.title,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

package/src/modules/dx/cardContent/cardContent.html

@@ -21,10 +21,7 @@
             />
         </a>
         <div
-            class="
-                dx-card-base_section-vertical dx-card-base_column
-                card_section-text
-            "
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
             <span if:true={label} part="label" class="label dx-text-label-3">
                 {label}

package/src/modules/dx/cardDocs/cardDocs.html

@@ -7,10 +7,7 @@
             class="image dx-card-base_image"
         />
         <div
-            class="
-                dx-card-base_section-vertical dx-card-base_column
-                card_section-text
-            "
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
             <span class="dx-text-label-3">{label}</span>
             <dx-card-title

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -27,7 +27,6 @@ export default class CardDocs extends LightningElement {
 
     private onSlotChange(e: LightningSlotElement) {
         const payloadInnerButton = {
-            element_title: "dx-button",
             element_type: "link",
             content_category: "card"
         };
@@ -38,11 +37,13 @@ export default class CardDocs extends LightningElement {
             slotElement?.addEventListener("click", (event: Event) => {
                 track(event.currentTarget!, "custEv_cardClick", {
                     ...payloadInnerButton,
+                    element_title: slotElement.innerText,
                     click_text: slotElement.innerText,
                     click_url: slotElement.href
                 });
                 track(event.currentTarget!, "custEv_linkClick", {
                     ...payloadInnerButton,
+                    element_title: slotElement.innerText,
                     click_text: slotElement.innerText,
                     click_url: slotElement.href
                 });
@@ -52,21 +53,21 @@ export default class CardDocs extends LightningElement {
     }
 
     private handleLinkClick(event: PointerEvent) {
-        const paylodCardInfo = {
+        const payloadCardInfo = {
             click_text: this.title,
-            element_title: "dx-card-title",
+            element_title: this.title,
             click_url: this.href,
             element_type: "link",
             content_category: "cta"
         };
-        track(event.currentTarget!, "custEv_cardClick", paylodCardInfo);
-        track(event.currentTarget!, "custEv_linkClick", paylodCardInfo);
+        track(event.currentTarget!, "custEv_cardClick", payloadCardInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardInfo);
     }
 
     private handleTextClick(event: PointerEvent) {
         const payloadCardTextInfo = {
             click_text: this.body,
-            element_title: "span",
+            element_title: this.body,
             click_url: this.href,
             element_type: "tile",
             content_category: "cta"

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -68,10 +68,9 @@ export default class CodeBlock extends LightningElement {
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
-        this._codeBlock = (
-            (match = preTagRegexp.exec(value.trim())) === null
-                ? value.trim()
-                : match[1]
+        this._codeBlock = ((match = preTagRegexp.exec(value.trim())) === null
+            ? value.trim()
+            : match[1]
         ).trim();
     }
 
@@ -108,23 +107,35 @@ export default class CodeBlock extends LightningElement {
     formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
+
+        // Replace any <var> markup with a temporary nonsense sentinel (but one that is very
+        // unlikely to affect Prism's tokenization) so that Prism will not strip them but does
+        // still tokenize correctly. We want to italicize the "variables" ourselves after Prism
+        // does its own thing (W-11975205).
+        let cleanCodeBlock = this.codeBlock.replace(
+            /<var.*?>(.+?)<\/var>/g,
+            "vvvvv$1vvvvv"
+        );
+
         if (
             !this.isEncoded &&
             this.markupLangs.includes(this.selectedLanguage.id || "")
         ) {
-            // eslint-disable-next-line
-            templateEl.innerHTML = `<pre class='codeblock'><!--${this.codeBlock.replace(
+            // Temporarily replace HTML comment characters, which Prism would also strip
+            cleanCodeBlock = `<!--${cleanCodeBlock.replace(
                 /<!--(.*?)-->/gs,
                 "@@$1##"
-            )}--></pre>`;
+            )}-->`;
         } else {
-            // eslint-disable-next-line
-            const innerHtml = this.isEncoded
-                ? this.codeBlock
-                : this.codeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
-
-            templateEl.innerHTML = `<pre class='codeblock'>${innerHtml}</pre>`;
+            // If this is a non-encoded markup language, encode angle brackets that Prism would strip
+            cleanCodeBlock = this.isEncoded
+                ? cleanCodeBlock
+                : cleanCodeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
         }
+
+        // eslint-disable-next-line
+        templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
+
         const codeBlockEls = templateEl.content.querySelectorAll("pre");
         codeBlockEls.forEach((codeBlockEl) => {
             // eslint-disable-next-line
@@ -141,12 +152,19 @@ export default class CodeBlock extends LightningElement {
             // for custom markup content, it is a workaround to be refactored later.
             // eslint-disable-next-line
             this.language !== "text"
-                ? (codeEl.innerHTML = codeHTML)
+                ? // eslint-disable-next-line
+                  (codeEl.innerHTML = codeHTML)
                 : (codeEl.textContent = this._codeBlock.trim());
             // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
             Prism.highlightAllUnder(codeBlockEl);
+            // Italicize anything marked as a "variable" by the docs team
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
+                /vvvvv(.+?)vvvvv/g,
+                "<span class='token italic'>$1</span>"
+            );
         });
 
         if (divEl) {
@@ -156,6 +174,7 @@ export default class CodeBlock extends LightningElement {
             if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
                 const res = this.template.querySelector(`code.language-markup`);
                 if (res) {
+                    // Restore any temporarily replaced HTML comment characters
                     // eslint-disable-next-line
                     res.innerHTML = res.innerHTML.replace(
                         /@@(.*?)##/gs,
@@ -193,13 +212,14 @@ export default class CodeBlock extends LightningElement {
         gtmTrack(event.target, "custEv_iconClick", {
             click_text: this.copyBtnText,
             element_type: "icon",
-            element_title: "dx-icon",
+            element_title: this.copyBtnText,
             content_category: "code block"
         });
 
         try {
-            const snippetContainer: HTMLElement | null =
-                this.template.querySelector(".code-block-content");
+            const snippetContainer: HTMLElement | null = this.template.querySelector(
+                ".code-block-content"
+            );
             if (snippetContainer && snippetContainer.textContent) {
                 await navigator.clipboard.writeText(
                     snippetContainer.textContent
@@ -221,7 +241,7 @@ export default class CodeBlock extends LightningElement {
         gtmTrack(event.target, "custEv_iconClick", {
             click_text: this.updateThemeBtnText,
             element_type: "icon",
-            element_title: "dx-icon",
+            element_title: this.updateThemeBtnText,
             content_category: "code block"
         });
     }

package/src/modules/dx/dropdown/dropdown.ts

@@ -172,8 +172,9 @@ export default class Dropdown extends LightningElement {
             ? this.findOptionElementIndex(this.value)
             : 0;
 
-        const optionToFocus: any =
-            this.optionsElements[defaultIndex < 0 ? 0 : defaultIndex];
+        const optionToFocus: any = this.optionsElements[
+            defaultIndex < 0 ? 0 : defaultIndex
+        ];
         if (optionToFocus) {
             optionToFocus.focus();
             this._focusedValue = optionToFocus.option.id;

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -49,7 +49,7 @@ export default class DropdownOption extends LightningElement {
                 click_url: this.option.link?.href,
                 element_type: this.analyticsPayload?.element_type || "dropdown",
                 ...(this.analyticsPayload?.nav_type
-                    ? { nav_item: this.option.label }
+                    ? { nav_item: `${this.navItemLabel}:${this.option.label}` }
                     : {})
             });
         }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -205,7 +205,7 @@ export default class FeaturedContentHeader extends LightningElement {
         track(event.target!, trackEvent, {
             media_name: this.title,
             media_action: action,
-            media_episode: this.href,
+            media_episode: this.title.split(":")[0],
             media_percentage_played: percentagePlayed,
             media_seconds_played: timePlayed,
             media_type: "podcast"

package/src/modules/dx/filterMenu/filterMenu.html

@@ -62,10 +62,7 @@
                                             stroke-width="2"
                                             stroke-linecap="round"
                                             stroke-linejoin="round"
-                                            class="
-                                                feather feather-chevron-down
-                                                year-caret
-                                            "
+                                            class="feather feather-chevron-down year-caret"
                                         >
                                             <polyline
                                                 points="6 9 12 15 18 9"
@@ -88,9 +85,7 @@
                                                 {month.id}&nbsp;
                                                 <span
                                                     if:true={filtersDatesLoading}
-                                                    class="
-                                                        filters-dates-loading
-                                                    "
+                                                    class="filters-dates-loading"
                                                 ></span>
                                                 <span
                                                     if:false={filtersDatesLoading}

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -80,10 +80,9 @@ export default class FilterMenu extends LightningElement {
 
     private setIntedeterminateStatus(checkbox: any, value: boolean) {
         if ("isYear" in checkbox.value && !checkbox.value.isYear) {
-            const yearCheckBox: any =
-                checkbox.parentElement.parentElement.parentElement.querySelector(
-                    ".checkbox-year"
-                );
+            const yearCheckBox: any = checkbox.parentElement.parentElement.parentElement.querySelector(
+                ".checkbox-year"
+            );
             yearCheckBox.indeterminate = value;
         }
     }

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

@@ -81,7 +81,8 @@ export const generalLinksRaw: OptionWithRequiredNested[] = [
         options: [
             {
                 link: {
-                    href: "https://trailhead.salesforce.com/trailblazer-community/feed"
+                    href:
+                        "https://trailhead.salesforce.com/trailblazer-community/feed"
                 },
                 label: "Trailblazer Community",
                 id: "Trailblazer Community"
@@ -158,7 +159,8 @@ export const termsLinks = [
         label: "Legal"
     },
     {
-        href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
+        href:
+            "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
         label: "Use of Cookies"
     },
     { href: "https://trust.salesforce.com/en/", label: "Trust" },

package/src/modules/dx/footerOption/footerOption.ts

@@ -13,12 +13,13 @@ export default class FooterOption extends LightningElement {
             click_text: this.label || undefined,
             click_url: this.href || undefined,
             nav_item: this.label || undefined,
+            nav_level: "2",
             element_type: "link",
             nav_type: "footer"
         });
         track(e.currentTarget!, "custEv_linkClick", {
             click_text: this.label,
-            element_title: "dx-button",
+            element_title: this.label,
             click_url: this.href,
             element_type: "link",
             content_category: "cta"

package/src/modules/dx/grid/grid.ts

@@ -67,8 +67,6 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (
-            e.target as LightningSlotElement
-        ).assignedElements().length;
+        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
     }
 }

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -41,12 +41,12 @@ export default class MainContentHeader extends LightningElement {
                 click_text: this.ctaLabel,
                 click_url: this.ctaHref,
                 element_type: "button",
-                element_title: "dx-button",
+                element_title: this.ctaLabel,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
-                element_title: "dx-button",
+                element_title: this.ctaLabel,
                 click_url: this.ctaHref,
                 element_type: "link",
                 content_category: "cta"
@@ -60,12 +60,12 @@ export default class MainContentHeader extends LightningElement {
                 click_text: this.ctaLabelSecondary,
                 click_url: this.ctaHrefSecondary,
                 element_type: "button",
-                element_title: "dx-button",
+                element_title: this.ctaLabelSecondary,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
-                element_title: "dx-button",
+                element_title: this.ctaLabelSecondary,
                 click_url: this.ctaHrefSecondary,
                 element_type: "link",
                 content_category: "cta"

package/src/modules/dx/popover/popover.ts

@@ -246,9 +246,9 @@ export default class Popover extends LightningElement {
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const slotElement = (
-            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
-        ) as HTMLElement | null;
+        const slotElement = (slotted?.tagName === "SLOT"
+            ? slotted.firstChild
+            : slotted) as HTMLElement | null;
         const isWorkToDo =
             slotElement &&
             (!this.control || !slotElement.isSameNode(this.control));

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -1,5 +1,6 @@
 import { LightningElement } from "lwc";
 import { throttle } from "throttle-debounce";
+import { track } from "dxUtils/analytics";
 
 const RESTORE_SCROLL_EVENT_NAME = "restore-scroll";
 const LOAD_TIME_SCROLL_RESTORE_DELAY = 750;
@@ -17,29 +18,36 @@ export const restoreScroll = () => {
         return;
     }
     document.body.scrollTop = document.documentElement.scrollTop =
-        window.history.state?.scroll.value;
+        window.history.state?.scroll?.value;
 };
 
 export default class ScrollManager extends LightningElement {
     /*
-        WARNING: Dark Magic(TM) follows. This code is likely to be unreliable if:
-            - Our load times significantly change (in this case, LOAD_TIME_SCROLL_RESTORE_DELAY may need to be adjusted)
-            - Any other components attempt to manipulate the body scroll (including #a links) before LOAD_TIME_SCROLL_RESTORE_DELAY has expired
-
-        This Dark Magic(TM) was required because of the following super annoying race condition occuring while trying to restore scroll position:
-            1. Load a page on our site (reproducible consistently at time of writing at https://developer.salesforce.com)
-            2. Scroll down somewhere (remember where)
-            3. Navigate to another page
-            4. Navigate back/forward/back, using the browser forward/back buttons (sometimes it takes a few tries to reproduce the race condition)
-            5. If the page you're on takes long enough for its components to finish rendering asynchronously, sometimes your scroll position will be incorrect 
-                (until the second scroll restore is called. To see the really bad behavior, simply remove the window.setTimeout bit)
-        This is because basically it scrolls you down a bit, then a component gets bigger above you as it finishes rendering
-        This pushes your whole view down, so unless we do this Dark Magic(TM) where we attempt to restore scroll _again_
-        after some reasonable interval, your window will be in the wrong spot when everything finishes rendering
-    */
+      WARNING: Dark Magic(TM) follows. This code is likely to be unreliable if:
+          - Our load times significantly change (in this case, LOAD_TIME_SCROLL_RESTORE_DELAY may need to be adjusted)
+          - Any other components attempt to manipulate the body scroll (including #a links) before LOAD_TIME_SCROLL_RESTORE_DELAY has expired
+
+      This Dark Magic(TM) was required because of the following super annoying race condition occuring while trying to restore scroll position:
+          1. Load a page on our site (reproducible consistently at time of writing at https://developer.salesforce.com)
+          2. Scroll down somewhere (remember where)
+          3. Navigate to another page
+          4. Navigate back/forward/back, using the browser forward/back buttons (sometimes it takes a few tries to reproduce the race condition)
+          5. If the page you're on takes long enough for its components to finish rendering asynchronously, sometimes your scroll position will be incorrect 
+              (until the second scroll restore is called. To see the really bad behavior, simply remove the window.setTimeout bit)
+      This is because basically it scrolls you down a bit, then a component gets bigger above you as it finishes rendering
+      This pushes your whole view down, so unless we do this Dark Magic(TM) where we attempt to restore scroll _again_
+      after some reasonable interval, your window will be in the wrong spot when everything finishes rendering
+  */
 
     protected scrollCount = 0; // this is for dark magic, basically we lock the user out of scrolling in the first quarter second, unless they really mean it. We do this because load timings mean that the scroll can get messed up in that period
 
+    private scrollPosition = 0;
+    private scrolledTwentyFivePercent = false;
+    private scrolledFiftyPercent = false;
+    private scrolledSevenFivePercent = false;
+    private scrolledOneHundredPercent = false;
+    private scrollUnlocked = false;
+
     renderedCallback() {
         scrollUnlocked = window.location.hash !== ""; // if we have anchor links, skip the entire scroll restore
         if (!globalThis.singletonScrollManagerRendered && !scrollUnlocked) {
@@ -51,12 +59,22 @@ export default class ScrollManager extends LightningElement {
                 // only do this if loading is complete and the scrollHeight matches expectations
                 // otherwise, we're likely still loading, so just chill to avoid jumping around so much
                 restoreScroll();
+                this.setScrolledPercentagesFromRestore(
+                    this.calculateScrollPercentage(
+                        +window.history.state?.scroll?.value
+                    )
+                );
             } else {
                 window.setTimeout(() => {
                     // sometimes loading is slow, so we may want to reset the scroll to
                     // the correct position after loading is complete, to avoid weird behavior
                     // but only if the user hasn't scrolled around in the meantime
                     restoreScroll();
+                    this.setScrolledPercentagesFromRestore(
+                        this.calculateScrollPercentage(
+                            +window.history.state?.scroll?.value
+                        )
+                    );
                     scrollUnlocked = true;
                 }, LOAD_TIME_SCROLL_RESTORE_DELAY);
             }
@@ -80,6 +98,56 @@ export default class ScrollManager extends LightningElement {
         }
     }
 
+    sendGtmScrollThresholdEvent(threshold: "25" | "50" | "75" | "100") {
+        track(document.body, "custEv_scroll", {
+            scrollDepth: threshold
+        });
+    }
+
+    calculateScrollPercentage(scrollTop: number = document.body.scrollTop) {
+        return (
+            (scrollTop / (document.body.scrollHeight - window.innerHeight)) *
+            100
+        );
+    }
+
+    // do not re-send scrolled events when scroll position is restored and user scrolls up
+    setScrolledPercentagesFromRestore(scrollPercentage: number) {
+        if (scrollPercentage > 25) {
+            this.scrolledTwentyFivePercent = true;
+        }
+        if (scrollPercentage > 50) {
+            this.scrolledFiftyPercent = true;
+        }
+        if (scrollPercentage > 75) {
+            this.scrolledSevenFivePercent = true;
+        }
+        if (scrollPercentage > 100) {
+            this.scrolledOneHundredPercent = true;
+        }
+    }
+
+    scrollThresholdHandler() {
+        this.scrollPosition = this.calculateScrollPercentage();
+
+        if (this.scrollPosition > 25 && !this.scrolledTwentyFivePercent) {
+            this.scrolledTwentyFivePercent = true;
+            this.sendGtmScrollThresholdEvent("25");
+        } else if (this.scrollPosition > 50 && !this.scrolledFiftyPercent) {
+            this.scrolledFiftyPercent = true;
+            this.sendGtmScrollThresholdEvent("50");
+        } else if (this.scrollPosition > 75 && !this.scrolledSevenFivePercent) {
+            this.scrolledSevenFivePercent = true;
+            this.sendGtmScrollThresholdEvent("75");
+        } else if (
+            this.scrollPosition === 100 &&
+            !this.scrolledOneHundredPercent
+        ) {
+            this.scrolledOneHundredPercent = true;
+            this.sendGtmScrollThresholdEvent("100");
+        }
+    }
+
     saveScroll = throttle(100, () => {
         window.history.replaceState(
             {
@@ -101,6 +169,7 @@ export default class ScrollManager extends LightningElement {
         }
         if (this.scrollUnlocked) {
             this.saveScroll();
+            this.scrollThresholdHandler();
         }
     };
 

package/src/modules/dx/searchResults/searchResults.ts

@@ -17,7 +17,9 @@ interface CoveoSearch {
 
 declare const Coveo: CoveoSearch;
 
-function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
+function getPaginationState(
+    event: CoveoSDK.IQuerySuccessEventArgs
+): {
     numberOfPages: number;
     currentPage: number;
 } {

package/src/modules/dx/select/select.ts

@@ -79,8 +79,9 @@ export default class Select extends LightningElement {
 
     get selectElement() {
         if (!this._selectElement) {
-            this._selectElement =
-                this.template.querySelector<HTMLSelectElement>("select");
+            this._selectElement = this.template.querySelector<HTMLSelectElement>(
+                "select"
+            );
         }
         return this._selectElement;
     }

package/src/modules/dx/sidebar/sidebar.ts

@@ -51,11 +51,9 @@ export default class Sidebar extends SidebarBase {
 
     @api
     setInputValue(searchTerm: string) {
-        (
-            this.template.querySelector(
-                "dx-sidebar-search"
-            ) as unknown as SidebarSearch
-        )?.setInputValue(searchTerm);
+        ((this.template.querySelector(
+            "dx-sidebar-search"
+        ) as unknown) as SidebarSearch)?.setInputValue(searchTerm);
     }
 
     private expanded: boolean = true;
@@ -169,8 +167,6 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
-
-        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {
@@ -217,9 +213,9 @@ export default class Sidebar extends SidebarBase {
             return;
         }
 
-        const search = this.template.querySelector(
+        const search = (this.template.querySelector(
             "dx-sidebar-search"
-        ) as unknown as SidebarSearch;
+        ) as unknown) as SidebarSearch;
 
         if (
             this.isNearBottomOfSearchResults &&

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

@@ -95,8 +95,6 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
-
-        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {