fix(list): include groups in filtering

packages/calcite-components/src/components/list-item/interfaces.ts

@@ -4,5 +4,6 @@ export type ItemData = {
   label: string;
   description: string;
   metadata: Record<string, unknown>;
+  heading?: string;
   el: ListItem["el"];
-}[];
+};

packages/calcite-components/src/components/list/interfaces.ts

@@ -1,5 +1,6 @@
 import { DragDetail, MoveDetail } from "../../utils/sortableComponent";
 import type { ListItem } from "../list-item/list-item";
+import type { ListItemGroup } from "../list-item-group/list-item-group";
 import type { List } from "./list";
 
 export type ListDisplayMode = "flat" | "nested";
@@ -16,3 +17,5 @@ export interface ListMoveDetail extends MoveDetail {
   dragEl: ListItem["el"];
   relatedEl: ListItem["el"];
 }
+
+export type ListElement = ListItem["el"] | ListItemGroup["el"];

packages/calcite-components/src/components/list/list.e2e.ts

@@ -1,4 +1,4 @@
-import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
+import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
 import {
   accessible,
@@ -1875,6 +1875,114 @@ describe("calcite-list", () => {
     });
   });
 
+  describe("group filtering", () => {
+    it("should include groups while filtering", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-list filter-enabled filter-placeholder="typing 'recreation' should show 1st group with all items">
+          <calcite-list-item-group heading="Outdoor recreation" id="recreation">
+            <calcite-list-item
+              label="Hiking trails"
+              description="Designated routes for hikers to use."
+              value="hiking-trails"
+            ></calcite-list-item>
+            <calcite-list-item
+              label="Waterfalls"
+              description="Vertical drops from a river."
+              value="waterfalls"
+            ></calcite-list-item>
+            <calcite-list-item-group heading="Beaches" id="beaches">
+              <calcite-list-item label="Surfing" description="Surfing" value="Surfing"></calcite-list-item>
+              <calcite-list-item label="Paragliding" description="Paragliding" value="Paragliding"></calcite-list-item>
+              <calcite-list-item-group heading="Underwater" id="underwater">
+                <calcite-list-item label="Snorkeling" description="Snorkeling" value="Snorkeling"></calcite-list-item>
+                <calcite-list-item
+                  label="Scuba diving"
+                  description="Scuba diving"
+                  value="Scuba diving"
+                ></calcite-list-item>
+              </calcite-list-item-group>
+            </calcite-list-item-group>
+          </calcite-list-item-group>
+          <calcite-list-item-group heading="Buildings" id="buildings">
+            <calcite-list-item
+              label="Park offices"
+              description="Home base for park staff to converse with visitors."
+              value="offices"
+            ></calcite-list-item>
+            <calcite-list-item
+              label="Guest lodges"
+              description="Small houses available for visitors to book for stays."
+              value="lodges"
+            ></calcite-list-item>
+          </calcite-list-item-group>
+        </calcite-list>
+      `);
+
+      const filter = await page.find(`calcite-list >>> calcite-filter`);
+      const list = await page.find("calcite-list");
+      await filter.callMethod("setFocus");
+      await page.waitForChanges();
+      expect(await list.getProperty("filteredItems")).toHaveLength(8);
+
+      const group1 = await page.find("#recreation");
+      const group2 = await page.find("#buildings");
+      const group3 = await page.find("#beaches");
+      const group4 = await page.find("#underwater");
+
+      await page.keyboard.type("Bui");
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+      expect(await list.getProperty("filterText")).toBe("Bui");
+      expect(await list.getProperty("filteredItems")).toHaveLength(2);
+
+      expect(await group1.isVisible()).toBe(false);
+      await assertDescendantItems(page, "#recreation", false);
+      expect(await group2.isVisible()).toBe(true);
+      await assertDescendantItems(page, `#buildings`, true);
+      expect(await group3.isVisible()).toBe(false);
+      await assertDescendantItems(page, `#beaches`, false);
+      expect(await group4.isVisible()).toBe(false);
+      await assertDescendantItems(page, `#underwater`, false);
+
+      await page.keyboard.press("Escape");
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+      expect(await list.getProperty("filterText")).toBe("");
+      expect(await list.getProperty("filteredItems")).toHaveLength(8);
+
+      expect(await group1.isVisible()).toBe(true);
+      await assertDescendantItems(page, "#recreation", true);
+      expect(await group2.isVisible()).toBe(true);
+      await assertDescendantItems(page, "#buildings", true);
+      expect(await group3.isVisible()).toBe(true);
+      await assertDescendantItems(page, "#beaches", true);
+      expect(await group4.isVisible()).toBe(true);
+      await assertDescendantItems(page, `#underwater`, true);
+
+      await page.keyboard.type("Bea");
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+      expect(await list.getProperty("filterText")).toBe("Bea");
+      expect(await list.getProperty("filteredItems")).toHaveLength(4);
+
+      expect(await group1.isVisible()).toBe(true);
+      await assertDescendantItems(page, "#recreation", false);
+      expect(await group2.isVisible()).toBe(false);
+      await assertDescendantItems(page, "#buildings", false);
+      expect(await group3.isVisible()).toBe(true);
+      await assertDescendantItems(page, "#beaches", true);
+      expect(await group4.isVisible()).toBe(true);
+      await assertDescendantItems(page, `#underwater`, true);
+
+      await page.keyboard.press("Backspace");
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.filter);
+      expect(await list.getProperty("filterText")).toBe("Be");
+      expect(await list.getProperty("filteredItems")).toHaveLength(4);
+    });
+  });
+
   describe("themed", () => {
     describe("default", () => {
       themed(html`calcite-list`, {
@@ -1885,4 +1993,9 @@ describe("calcite-list", () => {
       });
     });
   });
+
+  async function assertDescendantItems(page: E2EPage, groupSelector: string, visibility: boolean): Promise<void> {
+    const items = await page.findAll(`calcite-list-item-group${groupSelector} > calcite-list-item`);
+    items.forEach(async (item: E2EElement) => expect(await item.isVisible()).toBe(visibility));
+  }
 });

packages/calcite-components/src/components/list/list.stories.ts

@@ -5088,3 +5088,27 @@ export const sortableListWithSingleItem = (): string =>
   html`<calcite-list drag-enabled label="test">
     <calcite-list-item label="small" value="small" description="small hello world"></calcite-list-item>
   </calcite-list>`;
+
+export const filterGroups = (): string =>
+  html` <calcite-list
+    filter-enabled
+    filter-placeholder="typing 'recreation' should show 1st group with all items"
+    filter-text="Beaches"
+  >
+    <calcite-list-item-group heading="Outdoor recreation" id="recreation">
+      <calcite-list-item
+        label="Hiking trails"
+        description="Designated routes for hikers to use."
+        value="hiking-trails"
+      ></calcite-list-item>
+      <calcite-list-item
+        label="Waterfalls"
+        description="Vertical drops from a river."
+        value="waterfalls"
+      ></calcite-list-item>
+      <calcite-list-item-group heading="Beaches" id="beaches">
+        <calcite-list-item label="Surfing" description="Surfing" value="Surfing"></calcite-list-item>
+        <calcite-list-item label="Paragliding" description="Paragliding" value="Paragliding"></calcite-list-item>
+      </calcite-list-item-group>
+    </calcite-list-item-group>
+  </calcite-list>`;

packages/calcite-components/src/components/list/list.tsx

@@ -39,6 +39,7 @@ import type { Filter } from "../filter/filter";
 import type { ListItemGroup } from "../list-item-group/list-item-group";
 import { CSS, debounceTimeout, SelectionAppearance, SLOTS } from "./resources";
 import T9nStrings from "./assets/t9n/messages.en.json";
+import { ListElement } from "./interfaces";
 import { ListDragDetail, ListDisplayMode, ListMoveDetail } from "./interfaces";
 import { styles } from "./list.scss";
 
@@ -82,6 +83,8 @@ export class List
 
   private listItems: ListItem["el"][] = [];
 
+  private listItemGroups: ListItemGroup["el"][] = [];
+
   mutationObserver = createObserver("mutation", () => {
     this.willPerformFilter = true;
     this.updateListItems();
@@ -160,7 +163,7 @@ export class List
 
   @state() assistiveText: string;
 
-  @state() dataForFilter: ItemData = [];
+  @state() dataForFilter: ItemData[] = [];
 
   @state() hasFilterActionsEnd = false;
 
@@ -224,7 +227,7 @@ export class List
   /** Placeholder text for the component's filter input field. */
   @property({ reflect: true }) filterPlaceholder: string;
 
-  /** Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). */
+  /** Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value, group heading). */
   @property() filterProps: string[];
 
   /** Text for the component's filter input field. */
@@ -235,7 +238,7 @@ export class List
    *
    * @readonly
    */
-  @property() filteredData: ItemData = [];
+  @property() filteredData: ItemData[] = [];
 
   /**
    * The currently filtered `calcite-list-item`s.
@@ -408,6 +411,7 @@ export class List
     this.updateListItems();
     this.setUpSorting();
     this.setParentList();
+    this.setListItemGroups();
   }
 
   async load(): Promise<void> {
@@ -649,6 +653,10 @@ export class List
     }
   }
 
+  private setListItemGroups(): void {
+    this.listItemGroups = Array.from(this.el.querySelectorAll(listItemGroupSelector));
+  }
+
   private handleFilterActionsStartSlotChange(event: Event): void {
     this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
   }
@@ -685,17 +693,15 @@ export class List
     filteredItems,
     visibleParents,
   }: {
-    el: ListItem["el"] | ListItemGroup["el"];
+    el: ListElement;
     filteredItems: ListItem["el"][];
-    visibleParents: WeakSet<ListItem["el"] | ListItemGroup["el"]>;
+    visibleParents: WeakSet<ListElement>;
   }): void {
     const filterHidden = !visibleParents.has(el) && !filteredItems.includes(el as ListItem["el"]);
 
     el.filterHidden = filterHidden;
 
-    const closestParent = el.parentElement.closest<ListItem["el"] | ListItemGroup["el"]>(
-      parentSelector,
-    );
+    const closestParent = el.parentElement.closest<ListElement>(parentSelector);
 
     if (!closestParent) {
       return;
@@ -769,7 +775,7 @@ export class List
     }
 
     if (filterEl.filteredItems) {
-      this.filteredData = filterEl.filteredItems as ItemData;
+      this.filteredData = filterEl.filteredItems as ItemData[];
     }
 
     this.updateListItems();
@@ -782,7 +788,7 @@ export class List
 
   private get effectiveFilterProps(): string[] {
     if (!this.filterProps) {
-      return ["description", "label", "metadata"];
+      return ["description", "label", "metadata", "heading"];
     }
 
     return this.filterProps.filter((prop) => prop !== "el");
@@ -813,15 +819,27 @@ export class List
     this.updateFilteredData();
   }
 
-  private getItemData(): ItemData {
+  private getItemData(): ItemData[] {
     return this.listItems.map((item) => ({
       label: item.label,
       description: item.description,
       metadata: item.metadata,
+      heading: this.getGroupHeading(item),
       el: item,
     }));
   }
 
+  private getGroupHeading(item: ListItem["el"]): string {
+    let heading = "";
+    this.listItemGroups.forEach((group) => {
+      if (group.contains(item)) {
+        heading += group.heading;
+      }
+    });
+
+    return heading;
+  }
+
   private updateGroupItems(): void {
     const { el, group, scale } = this;