@coveo/atomic-react 3.11.42 → 3.11.43

package/dist/cjs/atomic-react.cjs

@@ -5092,7 +5092,7 @@ const renderCategoryFacetSearchValue = ({ props })=>{
 
 const renderCategoryFacetTreeValueContainer = ()=>(children)=>lit.html`<li class="contents">${children}</li>`;
 
-const styles$r = lit.css`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark)}[part=value-exclude-button]+.value-count{margin-right:calc(var(--spacing,.25rem)*2)}:host(.popover-nested){min-width:var(--container-2xs,18rem)}:host(.popover-nested)::part(label-button){display:none}:host(.popover-nested)::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host(.popover-nested)::part(values){max-height:calc(var(--spacing,.25rem)*96);margin-top:0;overflow-y:auto}:host(.popover-nested)::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
+const styles$r = lit.css`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark)}[part=value-exclude-button]+.value-count{margin-right:calc(var(--spacing,.25rem)*2)}:host(:state(hidden)){display:none}:host(.popover-nested){min-width:var(--container-2xs,18rem)}:host(.popover-nested)::part(label-button){display:none}:host(.popover-nested)::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host(.popover-nested)::part(values){max-height:calc(var(--spacing,.25rem)*96);margin-top:0;overflow-y:auto}:host(.popover-nested)::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
 const facet_common_tw_css = styles$r;
 
 const styles$q = lit.css`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */input[type=text]:focus-visible~.search-icon{color:var(--atomic-primary)}input[type=text]:hover~.search-icon{color:var(--atomic-primary-light)}.search-icon atomic-icon{width:var(--atomic-facet-search-icon-size,.75rem);height:var(--atomic-facet-search-icon-size,.75rem)}.search-clear-button atomic-icon{width:var(--atomic-facet-search-clear-icon-size,.625rem);height:var(--atomic-facet-search-clear-icon-size,.625rem)}`;
@@ -8302,7 +8302,7 @@ function getWindow$1() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.2",
+        version: "3.61.3",
         headlessVersion
     };
 }
@@ -21850,6 +21850,18 @@ function initializePopover(host, childFacet) {
     host.dispatchEvent(buildCustomEvent('atomic/initializePopover', childFacet));
 }
 
+class FacetVisibilityController {
+    hostUpdate() {
+        if (this.isHidden()) this.internals.states.add('hidden');
+        else this.internals.states.delete('hidden');
+    }
+    constructor(host, isHidden){
+        this.isHidden = isHidden;
+        this.internals = host.attachInternals();
+        host.addController(this);
+    }
+}
+
 class ResultTemplateProvider extends TemplateProvider {
     makeDefaultTemplate() {
         const content = document.createDocumentFragment();
@@ -23589,22 +23601,27 @@ class TimeframeFacetCommon {
         this.facetForDatePickerDependenciesManager?.stopWatching();
         this.filterDependenciesManager?.stopWatching();
     }
-    get isHidden() {
-        return !this.shouldRenderFacet || !this.enabled;
+    isHostHidden({ hasError, firstSearchExecuted }) {
+        return hasError || !this.enabled || firstSearchExecuted && this.facetInfo.isHidden();
     }
-    registerFacetToStore() {
-        const facetInfo = {
+    get facetInfo() {
+        return {
             label: ()=>this.props.bindings.i18n.t(this.props.label),
             facetId: this.facetId,
             element: this.props.host,
             isHidden: ()=>this.isHidden
         };
+    }
+    get isHidden() {
+        return !this.shouldRenderFacet || !this.enabled;
+    }
+    registerFacetToStore() {
         this.props.bindings.store.registerFacet('dateFacets', {
-            ...facetInfo,
+            ...this.facetInfo,
             format: (value)=>this.formatFacetValue(value)
         });
         initializePopover(this.props.host, {
-            ...facetInfo,
+            ...this.facetInfo,
             hasValues: ()=>this.hasValues,
             numberOfActiveValues: ()=>this.numberOfSelectedValues
         });
@@ -23701,14 +23718,16 @@ class TimeframeFacetCommon {
     ></atomic-facet-date-input>`;
     }
     render({ hasError, firstSearchExecuted, isCollapsed, headerFocus, onToggleCollapse }) {
-        if (hasError || !this.enabled) return lit.nothing;
+        if (this.isHostHidden({
+            hasError,
+            firstSearchExecuted
+        })) return lit.nothing;
         if (!firstSearchExecuted) return renderFacetPlaceholder({
             props: {
                 numberOfValues: this.currentValues.length,
                 isCollapsed
             }
         });
-        if (!this.shouldRenderFacet) return lit.nothing;
         return renderFacetContainer()(lit.html`${this.renderHeader(isCollapsed, headerFocus, onToggleCollapse)}
       ${!isCollapsed ? lit.html`${this.shouldRenderValues ? this.renderValues() : lit.nothing}
             ${this.shouldRenderInput ? this.renderDateInput() : lit.nothing}` : lit.nothing}`);
@@ -25591,6 +25610,14 @@ function _ts_metadata$Y(metadataKey, metadataValue) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 let AtomicCategoryFacet$1 = class AtomicCategoryFacet extends lit.LitElement {
+    get facetInfo() {
+        return {
+            label: ()=>this.bindings.i18n.t(this.label),
+            facetId: this.facetId,
+            element: this,
+            isHidden: ()=>this.isHidden
+        };
+    }
     initialize() {
         if (this.tabsIncluded.length > 0 && this.tabsExcluded.length > 0) console.warn('Values for both "tabs-included" and "tabs-excluded" have been provided. This could lead to unexpected behaviors.');
         this.searchStatus = headless.buildSearchStatus(this.bindings.engine);
@@ -25620,15 +25647,9 @@ let AtomicCategoryFacet$1 = class AtomicCategoryFacet extends lit.LitElement {
         announceFacetSearchResultsWithAriaLive(this.facet, this.label, (msg)=>{
             this.facetSearchAriaMessage.message = msg;
         }, this.bindings.i18n);
-        const facetInfo = {
-            label: ()=>this.bindings.i18n.t(this.label),
-            facetId: this.facetId,
-            element: this,
-            isHidden: ()=>this.isHidden
-        };
-        this.bindings.store.registerFacet('categoryFacets', facetInfo);
+        this.bindings.store.registerFacet('categoryFacets', this.facetInfo);
         initializePopover(this, {
-            ...facetInfo,
+            ...this.facetInfo,
             hasValues: ()=>!!this.facet.state.valuesAsTrees.length,
             numberOfActiveValues: ()=>this.facetState.hasActiveValues ? 1 : 0
         });
@@ -25904,6 +25925,7 @@ let AtomicCategoryFacet$1 = class AtomicCategoryFacet extends lit.LitElement {
     }
     constructor(){
         super(), this.resultIndexToFocusOnShowMore = 0, this.label = 'no-label', this.tabsIncluded = [], this.tabsExcluded = [], this.numberOfValues = 8, this.withSearch = false, this.sortCriteria = 'occurrences', this.delimitingCharacter = ';', this.basePath = [], this.filterByBasePath = true, this.isCollapsed = false, this.headingLevel = 0, this.filterFacetCount = true, this.injectionDepth = 1000, this.facetSearchAriaMessage = new AriaLiveRegionController(this, 'facet-search');
+        new FacetVisibilityController(this, ()=>!!this.facet && this.facetInfo.isHidden());
         new ValidatePropsController(this, ()=>({
                 field: this.field,
                 numberOfValues: this.numberOfValues,
@@ -26425,6 +26447,7 @@ let AtomicColorFacet$1 = class AtomicColorFacet extends lit.LitElement {
     }
     constructor(){
         super(), this.label = 'no-label', this.tabsIncluded = [], this.tabsExcluded = [], this.numberOfValues = 8, this.withSearch = true, this.sortCriteria = 'automatic', this.resultsMustMatch = 'atLeastOneValue', this.displayValuesAs = 'box', this.isCollapsed = false, this.headingLevel = 0, this.filterFacetCount = true, this.injectionDepth = 1000, this.allowedValues = [], this.customSort = [], this.valuesBeforeShowMore = new Set();
+        new FacetVisibilityController(this, ()=>!!this.facet && this.facetInfo.isHidden());
         new ValidatePropsController(this, ()=>({
                 field: this.field,
                 numberOfValues: this.numberOfValues,
@@ -27218,6 +27241,7 @@ let AtomicFacet$1 = class AtomicFacet extends lit.LitElement {
     }
     constructor(){
         super(), this.label = 'no-label', this.tabsIncluded = [], this.tabsExcluded = [], this.numberOfValues = 8, this.withSearch = true, this.sortCriteria = 'automatic', this.resultsMustMatch = 'atLeastOneValue', this.displayValuesAs = 'checkbox', this.isCollapsed = false, this.headingLevel = 0, this.filterFacetCount = true, this.enableExclusion = false, this.injectionDepth = 1000, this.allowedValues = [], this.customSort = [], this.valuesBeforeShowMore = new Set();
+        new FacetVisibilityController(this, ()=>!!this.facet && this.facetInfo.isHidden());
         new ValidatePropsController(this, ()=>({
                 field: this.field,
                 numberOfValues: this.numberOfValues,
@@ -29347,6 +29371,14 @@ function _ts_metadata$H(metadataKey, metadataValue) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 let AtomicNumericFacet$1 = class AtomicNumericFacet extends lit.LitElement {
+    get facetInfo() {
+        return {
+            label: ()=>this.bindings.i18n.t(this.label),
+            facetId: this.facetId,
+            element: this,
+            isHidden: ()=>this.isHidden
+        };
+    }
     initialize() {
         this.validateTabs();
         this.initializeTabManager();
@@ -29506,14 +29538,8 @@ let AtomicNumericFacet$1 = class AtomicNumericFacet extends lit.LitElement {
         });
     }
     registerFacetToStore() {
-        const facetInfo = {
-            label: ()=>this.bindings.i18n.t(this.label),
-            facetId: this.facetId,
-            element: this,
-            isHidden: ()=>this.isHidden
-        };
         this.bindings.store.registerFacet('numericFacets', {
-            ...facetInfo,
+            ...this.facetInfo,
             format: (value)=>formatHumanReadable({
                     facetValue: value,
                     logger: this.bindings.engine.logger,
@@ -29524,7 +29550,7 @@ let AtomicNumericFacet$1 = class AtomicNumericFacet extends lit.LitElement {
                 })
         });
         initializePopover(this, {
-            ...facetInfo,
+            ...this.facetInfo,
             hasValues: ()=>this.hasValues,
             numberOfActiveValues: ()=>this.numberOfSelectedValues
         });
@@ -29625,6 +29651,7 @@ let AtomicNumericFacet$1 = class AtomicNumericFacet extends lit.LitElement {
     }
     constructor(){
         super(), this.label = 'no-label', this.tabsIncluded = [], this.tabsExcluded = [], this.numberOfValues = 8, this.sortCriteria = 'ascending', this.rangeAlgorithm = 'equiprobable', this.displayValuesAs = 'checkbox', this.isCollapsed = false, this.headingLevel = 0, this.filterFacetCount = true, this.injectionDepth = 1000, this.manualRanges = [], this.formatter = defaultNumberFormatter, this.conditionManagers = [];
+        new FacetVisibilityController(this, ()=>!!this.searchStatus && this.facetInfo.isHidden());
         new ValidatePropsController(this, ()=>({
                 displayValuesAs: this.displayValuesAs,
                 withInput: this.withInput
@@ -30488,6 +30515,14 @@ let AtomicRatingFacet$1 = class AtomicRatingFacet extends lit.LitElement {
         if (!this.headerFocus) this.headerFocus = new FocusTargetController(this, this.bindings);
         return this.headerFocus;
     }
+    get facetInfo() {
+        return {
+            label: ()=>this.bindings.i18n.t(this.label),
+            facetId: this.facetId,
+            element: this,
+            isHidden: ()=>this.isHidden
+        };
+    }
     connectedCallback() {
         super.connectedCallback();
         if (void 0 === this.maxValueInIndex) this.maxValueInIndex = this.numberOfIntervals;
@@ -30533,19 +30568,13 @@ let AtomicRatingFacet$1 = class AtomicRatingFacet extends lit.LitElement {
             options
         });
         this.facetId = this.facet.state.facetId;
-        const facetInfo = {
-            label: ()=>this.bindings.i18n.t(this.label),
-            facetId: this.facetId,
-            element: this,
-            isHidden: ()=>this.isHidden
-        };
         this.bindings.store.registerFacet('numericFacets', {
-            ...facetInfo,
+            ...this.facetInfo,
             format: (value)=>this.formatFacetValue(value),
             content: (value)=>this.ratingContent(value)
         });
         initializePopover(this, {
-            ...facetInfo,
+            ...this.facetInfo,
             hasValues: ()=>!!this.valuesToRender.length,
             numberOfActiveValues: ()=>this.numberOfSelectedValues
         });
@@ -30672,6 +30701,7 @@ let AtomicRatingFacet$1 = class AtomicRatingFacet extends lit.LitElement {
     }
     constructor(){
         super(), this.label = 'no-label', this.numberOfIntervals = 5, this.tabsIncluded = [], this.tabsExcluded = [], this.minValueInIndex = 1, this.displayValuesAs = 'checkbox', this.icon = star, this.isCollapsed = false, this.headingLevel = 0, this.injectionDepth = 1000;
+        new FacetVisibilityController(this, ()=>!!this.facet && this.facetInfo.isHidden());
         new ValidatePropsController(this, ()=>({
                 field: this.field,
                 numberOfIntervals: this.numberOfIntervals,
@@ -30885,6 +30915,14 @@ function _ts_metadata$A(metadataKey, metadataValue) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 let AtomicRatingRangeFacet$1 = class AtomicRatingRangeFacet extends lit.LitElement {
+    get facetInfo() {
+        return {
+            label: ()=>this.bindings.i18n.t(this.label),
+            facetId: this.facetId,
+            element: this,
+            isHidden: ()=>this.isHidden
+        };
+    }
     connectedCallback() {
         super.connectedCallback();
         if (void 0 === this.maxValueInIndex) this.maxValueInIndex = this.numberOfIntervals;
@@ -30933,19 +30971,13 @@ let AtomicRatingRangeFacet$1 = class AtomicRatingRangeFacet extends lit.LitEleme
             options
         });
         this.facetId = this.facet.state.facetId;
-        const facetInfo = {
-            label: ()=>this.bindings.i18n.t(this.label),
-            facetId: this.facetId,
-            element: this,
-            isHidden: ()=>this.isHidden
-        };
         this.bindings.store.registerFacet('numericFacets', {
-            ...facetInfo,
+            ...this.facetInfo,
             format: (value)=>this.formatFacetValue(value),
             content: (value)=>this.ratingContent(value)
         });
         initializePopover(this, {
-            ...facetInfo,
+            ...this.facetInfo,
             hasValues: ()=>!!this.valuesToRender.length,
             numberOfActiveValues: ()=>this.numberOfSelectedValues
         });
@@ -31065,6 +31097,7 @@ let AtomicRatingRangeFacet$1 = class AtomicRatingRangeFacet extends lit.LitEleme
     }
     constructor(){
         super(), this.label = 'no-label', this.tabsIncluded = [], this.tabsExcluded = [], this.numberOfIntervals = 5, this.minValueInIndex = 1, this.icon = star, this.isCollapsed = false, this.headingLevel = 0, this.injectionDepth = 1000;
+        new FacetVisibilityController(this, ()=>!!this.facet && this.facetInfo.isHidden());
         new ValidatePropsController(this, ()=>({
                 field: this.field,
                 numberOfIntervals: this.numberOfIntervals,
@@ -31329,8 +31362,10 @@ let AtomicRefineModal$1 = class AtomicRefineModal extends lit.LitElement {
         const visibleFacetsClone = this.cloneFacets(visibleFacets);
         const invisibleFacetsClone = this.cloneFacets(invisibleFacets);
         collapseFacetsAfter(visibleFacetsClone, this.collapseFacetsAfter);
-        divSlot.append(...visibleFacetsClone);
-        divSlot.append(...invisibleFacetsClone);
+        const clonesByFacet = new Map();
+        visibleFacets.forEach((facet, index)=>clonesByFacet.set(facet, visibleFacetsClone[index]));
+        invisibleFacets.forEach((facet, index)=>clonesByFacet.set(facet, invisibleFacetsClone[index]));
+        divSlot.append(...sortedFacets.map((facet)=>clonesByFacet.get(facet)));
         const generator = this.makeAutomaticFacetGenerator();
         if (generator) {
             generator.updateCollapseFacetsDependingOnFacetsVisibility(this.collapseFacetsAfter, visibleFacets.length);
@@ -37742,6 +37777,10 @@ function _ts_metadata(metadataKey, metadataValue) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 let AtomicTimeframeFacet$1 = class AtomicTimeframeFacet extends lit.LitElement {
+    get isHidden() {
+        if (!this.timeframeFacetCommon || !this.searchStatusState) return false;
+        return this.timeframeFacetCommon.isHostHidden(this.searchStatusState);
+    }
     get focusTarget() {
         if (!this.headerFocus) this.headerFocus = new FocusTargetController(this, this.bindings);
         return this.headerFocus;
@@ -37850,6 +37889,7 @@ let AtomicTimeframeFacet$1 = class AtomicTimeframeFacet extends lit.LitElement {
         super(), this.label = 'no-label', this.field = 'date', this.tabsIncluded = [], this.tabsExcluded = [], this.withDatePicker = false, this.isCollapsed = false, this.headingLevel = 0, this.filterFacetCount = true, this.injectionDepth = 1000, this.sortCriteria = 'descending', this.handleDateInputApply = ()=>{
             if (this.facetId) this.bindings.engine.dispatch(headless.loadDateFacetSetActions(this.bindings.engine).deselectAllDateFacetValues(this.facetId));
         };
+        new FacetVisibilityController(this, ()=>this.isHidden);
         new ValidatePropsController(this, ()=>({
                 injectionDepth: this.injectionDepth,
                 headingLevel: this.headingLevel,