@coveo/atomic-react 3.11.44 → 3.11.46

package/dist/cjs/commerce/atomic-react.cjs

@@ -4987,6 +4987,46 @@ const booleanConverter = {
     }
 };
 
+const renderFacetValueLabelHighlight = ({ props })=>{
+    const classNames = tw({
+        'value-label peer-hover:text-error truncate': true,
+        'font-bold': props.isSelected || !!props.isExcluded
+    });
+    return lit.html`<span
+    title=${props.displayValue}
+    part="value-label"
+    class=${multiClassMap(classNames)}
+    .innerHTML=${highlightSearchResult(props.displayValue, props.searchQuery)}
+  ></span>`;
+};
+
+const renderCategoryFacetActiveValue = ({ props: { displayValue, numberOfResults, i18n, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const count = numberOfResults.toLocaleString(i18n.language);
+        return lit.html`${keyed_js.keyed(displayValue, lit.html`<li class="contents">
+        <span
+          part="active-parent ${isLeafValue ? 'leaf-value' : 'node-value'}"
+          class="text-primary flex w-full items-center truncate px-2 py-2.5 text-left"
+          aria-current="true"
+          tabindex="-1"
+          ${ref_js.ref(setRef)}
+        >
+          ${renderFacetValueLabelHighlight({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected: true
+            }
+        })}
+          <span part="value-count" class="value-count">
+            ${i18n.t('between-parentheses', {
+            text: count
+        })}
+          </span>
+        </span>
+        ${children}
+      </li>`)}`;
+    };
+
 var arrow_left_rounded = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
 
 const getAllCategoriesLocalizedLabel = ({ facetId, field, i18n })=>{
@@ -5047,91 +5087,6 @@ const renderCategoryFacetParentButton = ({ props })=>{
   `);
 };
 
-const renderFacetValueLabelHighlight = ({ props })=>{
-    const classNames = tw({
-        'value-label peer-hover:text-error truncate': true,
-        'font-bold': props.isSelected || !!props.isExcluded
-    });
-    return lit.html`<span
-    title=${props.displayValue}
-    part="value-label"
-    class=${multiClassMap(classNames)}
-    .innerHTML=${highlightSearchResult(props.displayValue, props.searchQuery)}
-  ></span>`;
-};
-
-const renderFacetValueLink = ({ props })=>(children)=>{
-        const count = props.numberOfResults.toLocaleString(props.i18n.language);
-        const ariaLabel = props.i18n.t('facet-value', {
-            value: props.displayValue,
-            count: props.numberOfResults,
-            formattedCount: count,
-            interpolation: {
-                escapeValue: false
-            }
-        });
-        let part = props.part ?? `value-link${props.isSelected ? ' value-link-selected' : ''}`;
-        if (props.additionalPart) part += ` ${props.additionalPart}`;
-        return lit.html`
-      ${keyed_js.keyed(props.displayValue, lit.html`<li class=${ifDefined_js.ifDefined(props.class)}>
-          ${renderButton({
-            props: {
-                style: 'text-neutral',
-                part,
-                onClick: ()=>props.onClick(),
-                class: 'group flex w-full items-center truncate px-2 py-2.5 text-left focus-visible:outline-none',
-                ariaPressed: props.isSelected ? 'true' : 'false',
-                ariaLabel,
-                ref: props.buttonRef
-            }
-        })(lit.html`${children}<span part="value-count" class="value-count">
-                ${props.i18n.t('between-parentheses', {
-            text: count
-        })}
-              </span>`)}
-          ${props.subList}
-        </li>`)}
-    `;
-    };
-
-const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isParent, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
-        const partNames = [];
-        if (isParent) partNames.push('active-parent');
-        else partNames.push(`value-link${isSelected ? ' value-link-selected' : ''}`);
-        if (isLeafValue) partNames.push('leaf-value');
-        else partNames.push('node-value');
-        return lit.html`${renderFacetValueLink({
-            props: {
-                displayValue,
-                numberOfResults,
-                i18n,
-                onClick,
-                isSelected,
-                searchQuery,
-                part: partNames.join(' '),
-                class: 'contents',
-                buttonRef: (element)=>{
-                    setRef?.(element);
-                },
-                subList: children
-            }
-        })(renderFacetValueLabelHighlight({
-            props: {
-                displayValue,
-                searchQuery,
-                isSelected
-            }
-        }))}`;
-    };
-
-const renderCategoryFacetParentValueLink = ({ props })=>renderCategoryFacetValueLink({
-        props: {
-            ...props,
-            isParent: true,
-            isSelected: true
-        }
-    });
-
 const renderCategoryFacetSearchResultsContainer = ()=>(children)=>lit.html`<ul part="search-results" class="mt-3">
       ${children}
     </ul>`;
@@ -5226,8 +5181,97 @@ const renderCategoryFacetSearchValue = ({ props })=>{
   </li>`;
 };
 
+const renderCategoryFacetSelectedValue = ({ props: { displayValue, label, i18n, onClearFilters } })=>lit.html`<div part="selected-value" class="mt-3 flex items-center justify-between gap-2">
+    <span
+      part="selected-value-pill"
+      title=${displayValue}
+      class="bg-neutral-light truncate rounded-md px-2 py-1 text-sm"
+      >${displayValue}</span
+    >
+    ${renderButton({
+        props: {
+            part: 'selected-value-clear-button',
+            style: 'text-primary',
+            class: 'flex shrink-0 items-center p-1 text-sm',
+            ariaLabel: i18n.t('clear-filters-for-facet', {
+                count: 1,
+                label: i18n.t(label)
+            }),
+            onClick: onClearFilters
+        }
+    })(lit.html`<atomic-icon
+          part="selected-value-clear-button-icon"
+          class="mr-1 h-2 w-2"
+          .icon=${images_close}
+        ></atomic-icon>
+        <span>${i18n.t('clear')}</span>`)}
+  </div>`;
+
 const renderCategoryFacetTreeValueContainer = ()=>(children)=>lit.html`<li class="contents">${children}</li>`;
 
+const renderFacetValueLink = ({ props })=>(children)=>{
+        const count = props.numberOfResults.toLocaleString(props.i18n.language);
+        const ariaLabel = props.i18n.t('facet-value', {
+            value: props.displayValue,
+            count: props.numberOfResults,
+            formattedCount: count,
+            interpolation: {
+                escapeValue: false
+            }
+        });
+        let part = props.part ?? `value-link${props.isSelected ? ' value-link-selected' : ''}`;
+        if (props.additionalPart) part += ` ${props.additionalPart}`;
+        return lit.html`
+      ${keyed_js.keyed(props.displayValue, lit.html`<li class=${ifDefined_js.ifDefined(props.class)}>
+          ${renderButton({
+            props: {
+                style: 'text-neutral',
+                part,
+                onClick: ()=>props.onClick(),
+                class: 'group flex w-full items-center truncate px-2 py-2.5 text-left focus-visible:outline-none',
+                ariaPressed: props.isSelected ? 'true' : 'false',
+                ariaLabel,
+                ref: props.buttonRef
+            }
+        })(lit.html`${children}<span part="value-count" class="value-count">
+                ${props.i18n.t('between-parentheses', {
+            text: count
+        })}
+              </span>`)}
+          ${props.subList}
+        </li>`)}
+    `;
+    };
+
+const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const partNames = [
+            `value-link${isSelected ? ' value-link-selected' : ''}`,
+            isLeafValue ? 'leaf-value' : 'node-value'
+        ];
+        return lit.html`${renderFacetValueLink({
+            props: {
+                displayValue,
+                numberOfResults,
+                i18n,
+                onClick,
+                isSelected,
+                searchQuery,
+                part: partNames.join(' '),
+                class: 'contents',
+                buttonRef: (element)=>{
+                    setRef?.(element);
+                },
+                subList: children
+            }
+        })(renderFacetValueLabelHighlight({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected
+            }
+        }))}`;
+    };
+
 const styles$e = 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$e;
 
@@ -5298,6 +5342,21 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry?.at(-1);
+        if (!activeValue) return lit.nothing;
+        return renderCategoryFacetSelectedValue({
+            props: {
+                displayValue: getFieldValueCaption(this.facetState.field, activeValue.value, this.bindings.i18n),
+                label: this.displayName,
+                i18n: this.bindings.i18n,
+                onClearFilters: ()=>{
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.deselectAll();
+                }
+            }
+        });
+    }
     renderValuesTree(parents, isRoot) {
         if (!this.hasParents) return this.renderChildren();
         if (isRoot) return renderCategoryFacetTreeValueContainer()(lit.html`
@@ -5342,16 +5401,12 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
         const activeParent = parents[0];
         const activeParentDisplayValue = getFieldValueCaption(this.facetState?.field, activeParent.value, this.bindings.i18n);
         return lit.html`
-      ${renderCategoryFacetParentValueLink({
+      ${renderCategoryFacetActiveValue({
             props: {
                 displayValue: activeParentDisplayValue,
                 numberOfResults: activeParent.numberOfResults,
                 i18n: this.bindings.i18n,
                 isLeafValue: activeParent.isLeafValue,
-                onClick: ()=>{
-                    this.focusTargets.activeValueFocus.focusAfterSearch();
-                    this.facet.deselectAll();
-                },
                 searchQuery: this.facetState.facetSearch.query,
                 setRef: (el)=>{
                     this.focusTargets.activeValueFocus.setTarget(el);
@@ -5376,7 +5431,6 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -5451,6 +5505,7 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
                     onClear: ()=>this.facet.facetSearch.clear()
                 }
             })}
+          ${this.renderSelectedValue()}
           ${when_js.when(shouldDisplaySearchResults(facetSearch), ()=>lit.html`
               ${when_js.when(facetSearch.values.length > 0, ()=>renderFacetValuesGroup({
                         props: {
@@ -9781,7 +9836,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.4",
+        version: "3.62.0",
         headlessVersion
     };
 }