feat(quantic)!: Change names of DOM Events used, to add the 'quantic_…

…_' prefix (#4383) [SFINT-5351](https://coveord.atlassian.net/browse/SFINT-5351) ### IN THIS PR: Changed the prefix of custom DOM events in the quantic package to have the ‘quantic__’ prefix so that the naming convention is standard across the package. ### TESTS: <img width="884" alt="image" src="https://github.com/user-attachments/assets/f384d74f-1ce9-4172-8b1f-9a7a28e6dc47"> [SFINT-5351]: https://coveord.atlassian.net/browse/SFINT-5351?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
coveo · Sep 17, 2024 · 86519d1 · 86519d1
1 parent a834c2f
commit 86519d1
Show file tree

Hide file tree

Showing 65 changed files with 182 additions and 147 deletions.
diff --git a/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts b/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts
@@ -35,7 +35,7 @@ describe('quantic-recommendation-list', () => {
   const defaultHeadingLevel = 1;
 
   const registerRecommendationTemplatesEvent =
-    'registerrecommendationtemplates';
+    'quantic__registerrecommendationtemplates';
 
   const recommendationsAlias = '@recommendations';
 

diff --git a/...uantic/cypress/e2e/default-2/result-list/folded-result-list/folded-result-list.cypress.ts b/...uantic/cypress/e2e/default-2/result-list/folded-result-list/folded-result-list.cypress.ts
@@ -38,7 +38,7 @@ describe('quantic-folded-result-list', () => {
   const defaultParentField = 'foldingchild';
   const defaultChildField = 'foldingparent';
   const defaultNumberOfFoldedResults = 2;
-  const registerResultTemplatesEvent = 'registerresulttemplates';
+  const registerResultTemplatesEvent = 'quantic__registerresulttemplates';
 
   function visitFoldedResultList(
     options: Partial<FoldedResultListOptions> = {},

diff --git a/packages/quantic/cypress/e2e/default-2/result-list/result-list.cypress.ts b/packages/quantic/cypress/e2e/default-2/result-list/result-list.cypress.ts
@@ -25,7 +25,7 @@ describe('quantic-resultlist', () => {
 
   const defaultFieldsToInclude =
     'date,author,source,language,filetype,parents,sfknowledgearticleid';
-  const registerResultTemplatesEvent = 'registerresulttemplates';
+  const registerResultTemplatesEvent = 'quantic__registerresulttemplates';
 
   const indexResultsAlias = '@indexResults';
 

diff --git a/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts b/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts
@@ -24,7 +24,7 @@ interface ResultQuickviewOptions {
 describe('quantic-result-quickview', () => {
   const pageUrl = 's/quantic-result-quickview';
 
-  const haspreview = 'haspreview';
+  const haspreview = 'quantic__haspreview';
   const resultActionRegister = 'quantic__resultactionregister';
 
   function visitResultQuickview(options: Partial<ResultQuickviewOptions> = {}) {

diff --git a/packages/quantic/force-app/examples/main/lwc/actionSendRating/actionSendRating.js b/packages/quantic/force-app/examples/main/lwc/actionSendRating/actionSendRating.js
@@ -9,7 +9,7 @@ export default class ActionSendRating extends LightningElement {
     }, 0);
   }
   handleSendRating() {
-    const customEvent = new CustomEvent('rating', {
+    const customEvent = new CustomEvent('quantic__rating', {
       detail: {
         id: this._id,
         score: 1,

diff --git a/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html b/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html
@@ -1,5 +1,5 @@
 <template>
-  <div onregisterresulttemplates={handleResultTemplateRegistration}>
+  <div onquantic__registerresulttemplates={handleResultTemplateRegistration}>
     <c-quantic-insight-interface engine-id={engineId} insight-id={insightId}>
       <c-quantic-aria-live></c-quantic-aria-live>
       <div

diff --git a/...-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.html b/...-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.html
@@ -16,7 +16,7 @@
       use-case={config.useCase}
       engine-id={engineId}
     >
-      <div onregisterresulttemplates={handleResultTemplateRegistration}>
+      <div onquantic__registerresulttemplates={handleResultTemplateRegistration}>
         <div>
           <c-quantic-tab
           label="Thread"

diff --git a/...ce-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.js b/...ce-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.js
@@ -57,7 +57,7 @@ export default class ExampleQuanticFoldedResultList extends LightningElement {
       defaultValue: 'search',
     },
   ];
-  expectedEvents = ['registerresulttemplates'];
+  expectedEvents = ['quantic__registerresulttemplates'];
 
   handleResultTemplateRegistration(event) {
     const resultTemplatesManager = event.detail;

diff --git a/...pp/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js b/...pp/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js
@@ -57,7 +57,7 @@ export default class ExampleQuanticRecommendationtList extends LightningElement
       defaultValue: 'grid',
     },
   ];
-  expectedEvents = ['registerrecommendationtemplates'];
+  expectedEvents = ['quantic__registerrecommendationtemplates'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;

diff --git a/.../quantic/force-app/examples/main/lwc/exampleQuanticResultList/exampleQuanticResultList.js b/.../quantic/force-app/examples/main/lwc/exampleQuanticResultList/exampleQuanticResultList.js
@@ -25,7 +25,7 @@ export default class ExampleQuanticResultList extends LightningElement {
       defaultValue: 'search',
     },
   ];
-  expectedEvents = ['registerresulttemplates'];
+  expectedEvents = ['quantic__registerresulttemplates'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;

diff --git a/...orce-app/examples/main/lwc/exampleQuanticResultQuickview/exampleQuanticResultQuickview.js b/...orce-app/examples/main/lwc/exampleQuanticResultQuickview/exampleQuanticResultQuickview.js
@@ -55,7 +55,7 @@ export default class ExampleQuanticResultQuickview extends LightningElement {
     },
   ];
 
-  expectedEvents = ['haspreview', 'quantic__resultactionregister'];
+  expectedEvents = ['quantic__haspreview', 'quantic__resultactionregister'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;

diff --git a/packages/quantic/force-app/examples/main/lwc/exampleSearch/exampleSearch.html b/packages/quantic/force-app/examples/main/lwc/exampleSearch/exampleSearch.html
@@ -1,7 +1,7 @@
 <template>
   <div
     class="search__container slds-p-around_medium"
-    onregisterresulttemplates={handleResultTemplateRegistration}
+    onquantic__registerresulttemplates={handleResultTemplateRegistration}
   >
     <c-quantic-search-interface
       engine-id={engineId}

diff --git a/...quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html b/...quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
@@ -14,7 +14,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -31,7 +31,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -47,7 +47,7 @@
                 <span class="slds-col breadcrumb-manager__field-name">{breadcrumbValue.label}{labels.colon} </span>
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <li class="breadcrumb__container">
-                    <c-quantic-pill label={breadcrumbValue.value} ondeselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
+                    <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
                   </li>
                 </ul>
               </li>
@@ -58,7 +58,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.value} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>

diff --git a/packages/quantic/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.js b/packages/quantic/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.js
@@ -3,6 +3,8 @@ import {LightningElement, api} from 'lwc';
 /**
  * The `QuanticCardContainer` component is used internally as a styling container.
  * @category Utility
+ * @fires CustomEvent#quantic__headerclick
+ * @fires CustomEvent#quantic__headerkeydown
  * @example
  * <c-quantic-card-container title="Card Example"></c-quantic-card-container>
  */
@@ -29,14 +31,14 @@ export default class QuanticCardContainer extends LightningElement {
 
   handleHeaderClick(evt) {
     evt.preventDefault();
-    const headerClickEvent = new CustomEvent('headerclick', {});
+    const headerClickEvent = new CustomEvent('quantic__headerclick', {});
     this.dispatchEvent(headerClickEvent);
   }
 
   handleHeaderKeyDown(evt) {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
-      const headerKeyDownEvent = new CustomEvent('headerkeydown', {});
+      const headerKeyDownEvent = new CustomEvent('quantic__headerkeydown', {});
       this.dispatchEvent(headerKeyDownEvent);
     }
   }

diff --git a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.html b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.html
@@ -9,7 +9,7 @@
     </template>
     <template if:true={hasParentsOrValues}>
       <div class="slds-size_1-of-1 slds-var-m-bottom_large">
-        <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+        <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
           <lightning-button-icon
             class={actionButtonCssClasses}
             slot="actions"
@@ -53,7 +53,7 @@
                 <template for:each={nonActiveParents} for:item="v">
                   <li class="slds-grid facet__non-active-parent" key={v.value}>
                     <c-quantic-category-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       item={v}
                       non-active-parent="true"
                       formatting-function={remoteGetValueCaption}
@@ -83,7 +83,7 @@
                             item={v}
                             active-parent={activeParent}
                             formatting-function={remoteGetValueCaption}
-                            onselectvalue={onSelectValue}>
+                            onquantic__selectvalue={onSelectValue}>
                           </c-quantic-category-facet-value>
                         </li>
                       </template>
@@ -99,7 +99,7 @@
                       item={result}
                       is-search-result="true"
                       formatting-function={remoteGetValueCaption}
-                      onselectvalue={onSelectValue}>
+                      onquantic__selectvalue={onSelectValue}>
                     </c-quantic-category-facet-value>
                   </template>
                 </template>

diff --git a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js
@@ -274,7 +274,7 @@ export default class QuanticCategoryFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: !!this.hasParentsOrValues,

diff --git a/...quantic/force-app/main/default/lwc/quanticCategoryFacetValue/quanticCategoryFacetValue.js b/...quantic/force-app/main/default/lwc/quanticCategoryFacetValue/quanticCategoryFacetValue.js
@@ -10,11 +10,11 @@ import {api, LightningElement} from 'lwc';
 
 /**
  * The `QuanticCategoryFacetValue` component is used by a `QuanticCategoryFacet` component to display a formatted facet value, path to that value and the number of results with that value.
- * @fires CustomEvent#selectvalue
+ * @fires CustomEvent#quantic__selectvalue
  * @category Search
  * @category Insight Panel
  * @example
- * <c-quantic-category-facet-value onselectvalue={onSelect} item={result} is-search-result active-parent></c-quantic-category-facet-value>
+ * <c-quantic-category-facet-value onquantic__selectvalue={onSelect} item={result} is-search-result active-parent></c-quantic-category-facet-value>
  */
 export default class QuanticCategoryFacetValue extends LightningElement {
   /**
@@ -113,7 +113,7 @@ export default class QuanticCategoryFacetValue extends LightningElement {
   onSelect(evt) {
     evt.preventDefault();
     this.dispatchEvent(
-      new CustomEvent('selectvalue', {
+      new CustomEvent('quantic__selectvalue', {
         detail: {
           value: this.facetValue,
         },
@@ -128,7 +128,7 @@ export default class QuanticCategoryFacetValue extends LightningElement {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
       this.dispatchEvent(
-        new CustomEvent('selectvalue', {
+        new CustomEvent('quantic__selectvalue', {
           detail: {
             value: this.facetValue,
           },

diff --git a/...ages/quantic/force-app/main/default/lwc/quanticCitation/__tests__/quanticCitation.test.js b/...ages/quantic/force-app/main/default/lwc/quanticCitation/__tests__/quanticCitation.test.js
@@ -154,7 +154,7 @@ describe('c-quantic-citation', () => {
     it('should dispatch a citation hover event after hovering over the the citation for more than 1200ms, 200ms debounce duration before hover + 1000ms minimum hover duration', async () => {
       const element = createTestComponent();
       await flushPromises();
-      setupEventDispatchTest('citationhover');
+      setupEventDispatchTest('quantic__citationhover');
 
       const citationLink = element.shadowRoot.querySelector(
         selectors.citationLink
@@ -178,7 +178,7 @@ describe('c-quantic-citation', () => {
     it('should not dispatch a citation hover event after hovering over the the citation for more than 1200ms', async () => {
       const element = createTestComponent();
       await flushPromises();
-      setupEventDispatchTest('citationhover');
+      setupEventDispatchTest('quantic__citationhover');
 
       const citationLink = element.shadowRoot.querySelector(
         selectors.citationLink

diff --git a/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js b/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js
@@ -9,10 +9,10 @@ const debounceDurationBeforeHoverMs = 200;
 
 /**
  * The `QuanticCitation` component renders an individual citation.
- * @fires CustomEvent#citationhover
+ * @fires CustomEvent#quantic__citationhover
  * @category Internal
  * @example
- * <c-quantic-citation citation={citation} interactive-citation={interactiveCitation} onclick={handleClick} onhover={handleHover}></c-quantic-citation>
+ * <c-quantic-citation citation={citation} interactive-citation={interactiveCitation} onclick={handleClick} onquantic__citationhover={handleHover}></c-quantic-citation>
  */
 export default class QuanticCitation extends NavigationMixin(LightningElement) {
   /**
@@ -84,7 +84,7 @@ export default class QuanticCitation extends NavigationMixin(LightningElement) {
       const tooltipDisplayDuration = Date.now() - this.hoverStartTimestamp;
       if (tooltipDisplayDuration >= minimumTooltipDisplayDurationMs) {
         this.dispatchEvent(
-          new CustomEvent('citationhover', {
+          new CustomEvent('quantic__citationhover', {
             detail: {
               citationHoverTimeMs: Date.now() - this.hoverStartTimestamp,
             },

diff --git a/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.html b/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.html
@@ -9,7 +9,7 @@
     </template>
     <template if:true={hasValues}>
       <div class="slds-size_1-of-1">
-        <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+        <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
           <lightning-button-icon
             class="actionButtonCssClasses"
             slot="actions"
@@ -44,7 +44,7 @@
                 <template for:each={values} for:item="v">
                   <li class="slds-grid" key={v.value}>
                     <c-quantic-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       key={v.start}
                       item={v}
                       is-checked={v.checked}

diff --git a/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js b/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js
@@ -177,7 +177,7 @@ export default class QuanticDateFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.hasValues,

diff --git a/...quantic/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.js b/...quantic/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.js
@@ -84,7 +84,7 @@ export default class QuanticDocumentSuggestion extends LightningElement {
     this.validateProps();
     if (!this.hasInitializationError) {
       registerComponentForInit(this, this.engineId);
-      this.template.addEventListener('rating', this.onRating);
+      this.template.addEventListener('quantic__rating', this.onRating);
     }
   }
 
@@ -118,7 +118,7 @@ export default class QuanticDocumentSuggestion extends LightningElement {
 
   disconnectedCallback() {
     this.unsubscribeDocumentSuggestion?.();
-    this.template.removeEventListener('rating', this.onRating);
+    this.template.removeEventListener('quantic__rating', this.onRating);
   }
 
   validateProps() {

diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.html b/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.html
@@ -14,8 +14,8 @@
       <div class="slds-size_1-of-1 slds-var-m-bottom_large">
         <c-quantic-card-container
           title={label}
-          onheaderclick={toggleFacetVisibility}
-          onheaderkeydown={toggleFacetVisibility}
+          onquantic__headerclick={toggleFacetVisibility}
+          onquantic__headerkeydown={toggleFacetVisibility}
         >
           <lightning-button-icon
             class={actionButtonCssClasses}
@@ -68,7 +68,7 @@
                     <template for:each={values} for:item="v">
                       <li class="slds-grid" key={v.value}>
                         <c-quantic-facet-value
-                          onselectvalue={onSelectValue}
+                          onquantic__selectvalue={onSelectValue}
                           item={v}
                           key={v.value}
                           is-checked={v.checked}
@@ -117,7 +117,7 @@
                 <template if:true={hasSearchResults}>
                   <template for:each={facetSearchResults} for:item="result">
                     <c-quantic-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       key={result.value}
                       item={result}
                       is-checked={result.checked}

diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js b/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js
@@ -272,7 +272,7 @@ export default class QuanticFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.hasValues,

diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.js b/packages/quantic/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.js
@@ -13,11 +13,11 @@ import {LightningElement, api} from 'lwc';
 
 /**
  * The `QuanticFacetValue` component is used by a facet component to display a formatted facet value and the number of results with that value.
- * @fires CustomEvent#selectvalue
+ * @fires CustomEvent#quantic__selectvalue
  * @category Search
  * @category Insight Panel
  * @example
- * <c-quantic-facet-value onselectvalue={onSelect} item={result} is-checked={result.checked} display-as-link={displayAsLink} formatting-function={formattingFunction}></c-quantic-facet-value>
+ * <c-quantic-facet-value onquantic__selectvalue={onSelect} item={result} is-checked={result.checked} display-as-link={displayAsLink} formatting-function={formattingFunction}></c-quantic-facet-value>
  */
 export default class QuanticFacetValue extends LightningElement {
   /**
@@ -113,7 +113,7 @@ export default class QuanticFacetValue extends LightningElement {
   onSelect(evt) {
     evt.preventDefault();
     this.dispatchEvent(
-      new CustomEvent('selectvalue', {
+      new CustomEvent('quantic__selectvalue', {
         detail: {
           value: this.formattedFacetValue,
         },
@@ -128,7 +128,7 @@ export default class QuanticFacetValue extends LightningElement {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
       this.dispatchEvent(
-        new CustomEvent('selectvalue', {
+        new CustomEvent('quantic__selectvalue', {
           detail: {
             value: this.formattedFacetValue,
           },