@salesforcedevs/dx-components 1.43.0 → 1.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.43.0",
+    "version": "1.44.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "bf2f0c89b6910f3aa996548889373eb5d0a5fc4e"
+    "gitHead": "0abdf26134a564b4a943ae4d8a99a1f66dbf6baa"
 }

package/src/modules/dx/searchHybrid/searchHybrid.css

@@ -1,3 +1,4 @@
+@import "dxHelpers/reset";
 @import "dxHelpers/text";
 
 :host {
@@ -81,6 +82,7 @@
     color: var(--dx-g-blue-vibrant-50);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
+    cursor: pointer;
 }
 
 .dx-filter-clear:disabled {
@@ -88,10 +90,6 @@
     cursor: default;
 }
 
-.dx-search-range {
-    margin: 0 0 var(--dx-g-spacing-lg);
-}
-
 .dx-search-main {
     flex: 1 1 0;
     min-width: 0;

package/src/modules/dx/searchHybrid/searchHybrid.html

@@ -31,9 +31,7 @@
                         class="dx-filter-type"
                         name="contentType"
                         header="Content Type"
-                        single-select
                         options={typeFilterOptions}
-                        value={selectedTypeValue}
                         onchange={handleTypeFilterChange}
                     ></dx-filter-menu>
                     <dx-filter-menu
@@ -49,13 +47,6 @@
                 </aside>
 
                 <div class="dx-search-main">
-                    <p
-                        if:true={showRange}
-                        class="dx-search-range dx-text-body-2"
-                        aria-live="polite"
-                    >
-                        Showing {rangeStart} - {rangeEnd} of {total}
-                    </p>
                     <!-- Loading -->
                     <template if:true={isLoading}>
                         <div class="dx-search-status" aria-live="polite">

package/src/modules/dx/searchHybrid/searchHybrid.mock.ts

@@ -221,8 +221,12 @@ const ALL = ROWS.map(row);
  * reflect the full result set (disjunctive facets), as the real API does.
  */
 export function mockSearchResponse(params: URLSearchParams) {
-    const type = params.get("type");
-    const results = type ? ALL.filter((r) => r.contentType === type) : ALL;
+    // `type` is a comma-separated list; selected types are OR'd.
+    const types = (params.get("type") ?? "").split(",").filter(Boolean);
+    const type = types.length > 0;
+    const results = type
+        ? ALL.filter((r) => types.includes(r.contentType))
+        : ALL;
     return {
         query: params.get("q") ?? "apex",
         locale: params.get("lang") ?? "en-us",

package/src/modules/dx/searchHybrid/searchHybrid.ts

@@ -57,7 +57,6 @@ interface DisplayResult {
 interface FacetChip {
     value: string;
     label: string;
-    count: number;
     active: boolean;
     cssClass: string;
 }
@@ -77,6 +76,15 @@ export default class SearchHybrid extends LightningElement {
     /** The page's server locale, used as the default search language. */
     @api defaultLanguage: string = "en-us";
 
+    /**
+     * Comma-separated content types to always offer in the Content Type filter
+     * (e.g. "docs,blog,page"), in display order. Counts come from the search
+     * response and default to 0. Types that appear in a response but are not
+     * listed here are appended, so nothing is hidden. When unset, the menu lists
+     * only the types in the response.
+     */
+    @api contentTypes?: string;
+
     /** Results per page. */
     @api limit?: number;
 
@@ -256,66 +264,76 @@ export default class SearchHybrid extends LightningElement {
     // ---- content-type facet chips (disjunctive) ---------------------------
 
     get facetChips(): FacetChip[] {
-        const facets = this.vm?.contentTypeFacets ?? [];
-        const selected = this.vm?.selectedType ?? null;
-        return facets
-            .filter((b) => b.value != null && b.value !== "")
-            .map((b) => {
-                const active = selected === b.value;
-                return {
-                    value: b.value,
-                    label: this.contentTypeLabel(b.value) ?? b.value,
-                    count: b.count,
-                    active,
-                    cssClass: active
-                        ? "dx-facet-chip dx-facet-chip_active"
-                        : "dx-facet-chip"
-                };
-            });
+        const responseFacets = (this.vm?.contentTypeFacets ?? []).filter(
+            (b) => b.value != null && b.value !== ""
+        );
+        const configured = (this.contentTypes ?? "")
+            .split(",")
+            .map((t) => t.trim())
+            .filter(Boolean);
+        // Configured types first (stable order), then any extra types the
+        // response returned. Per-type counts are intentionally not shown: they
+        // change as filters change, which is confusing.
+        const values = [
+            ...new Set([...configured, ...responseFacets.map((b) => b.value)])
+        ];
+        const selected = this.selectedTypeList;
+        return values.map((value) => {
+            const active = selected.includes(value);
+            return {
+                value,
+                label: this.contentTypeLabel(value) ?? value,
+                active,
+                cssClass: active
+                    ? "dx-facet-chip dx-facet-chip_active"
+                    : "dx-facet-chip"
+            };
+        });
     }
 
     get hasFacets(): boolean {
         return this.facetChips.length > 0;
     }
 
-    /** Options for the sidebar dx-filter-menu (single-select by content type, sent to the API as `type`). */
+    /** Options for the sidebar dx-filter-menu (multi-select by content type, sent to the API as a comma-separated `type`). */
     get typeFilterOptions(): Array<{
         id: string;
         name: string;
         value: string;
+        checked: boolean;
     }> {
         return this.facetChips.map((chip) => ({
             id: chip.value,
-            name: `${chip.label} (${chip.count})`,
-            value: chip.value
+            name: chip.label,
+            value: chip.value,
+            checked: chip.active
         }));
     }
 
-    get selectedTypeValue(): string {
-        return this.vm?.selectedType ?? "";
+    /** The view model's selectedType (null | string | string[]) as a list. */
+    private get selectedTypeList(): string[] {
+        const t = this.vm?.selectedType;
+        return t == null ? [] : Array.isArray(t) ? t : [t];
+    }
+
+    /** Adds `value` to the selection, or removes it if already selected. */
+    private toggleType(value: string): void {
+        const list = this.selectedTypeList;
+        const next = list.includes(value)
+            ? list.filter((t) => t !== value)
+            : [...list, value];
+        // A single type is passed as a string, several as an array.
+        this.controller?.setType(next.length > 1 ? next : next[0] ?? null);
     }
 
     get hasActiveType(): boolean {
-        return !!this.vm?.selectedType;
+        return this.selectedTypeList.length > 0;
     }
 
     get noActiveFilters(): boolean {
         return !this.hasActiveType && this.localeValue === this.defaultLanguage;
     }
 
-    get showRange(): boolean {
-        return this.hasResults && this.total > 0;
-    }
-
-    get rangeStart(): number {
-        return ((this.vm?.page ?? 1) - 1) * (this.vm?.limit ?? 10) + 1;
-    }
-
-    get rangeEnd(): number {
-        const limit = this.vm?.limit ?? 10;
-        return Math.min(this.rangeStart + limit - 1, this.total);
-    }
-
     // ---- locale select options -------------------------------------
 
     get showLocaleSelector(): boolean {
@@ -369,8 +387,8 @@ export default class SearchHybrid extends LightningElement {
     ): void {
         const value = event.detail?.value?.value;
         if (value) {
-            // Disjunctive toggle: the controller clears it if already active.
-            this.controller?.setType(value);
+            // Toggle: the controller adds the type, or removes it if selected.
+            this.toggleType(value);
         }
     }
 
@@ -386,9 +404,9 @@ export default class SearchHybrid extends LightningElement {
     handleFacetClick(event: Event): void {
         const value = (event.currentTarget as HTMLElement)?.dataset?.value;
         if (value) {
-            // Disjunctive toggle: the controller clears it if it is already
-            // active.
-            this.controller?.setType(value);
+            // Toggle: the controller adds the type, or removes it if it is
+            // already selected.
+            this.toggleType(value);
         }
     }