feat(filter): adds ability to match only specific filter data properties

packages/calcite-components/src/components.d.ts

@@ -1805,6 +1805,10 @@ export namespace Components {
           * Defines the items to filter. The component uses the values as the starting point, and returns items  that contain the string entered in the input, using a partial match and recursive search.  This property is needed to conduct filtering.
          */
         "items": object[];
+        /**
+          * Specifies the fields to match against when filtering.
+         */
+        "matchFields": string[];
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -9608,6 +9612,10 @@ declare namespace LocalJSX {
           * Defines the items to filter. The component uses the values as the starting point, and returns items  that contain the string entered in the input, using a partial match and recursive search.  This property is needed to conduct filtering.
          */
         "items"?: object[];
+        /**
+          * Specifies the fields to match against when filtering.
+         */
+        "matchFields"?: string[];
         /**
           * Use this property to override individual strings used by the component.
          */

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

@@ -277,6 +277,14 @@ describe("calcite-filter", () => {
       await page.waitForTimeout(DEBOUNCE_TIMEOUT);
       assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]);
     });
+
+    it("should return no matching values", async () => {
+      const filter = await page.find("calcite-filter");
+      filter.setProperty("matchFields", ["description"]);
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      assertMatchingItems(await filter.getProperty("filteredItems"), []);
+    });
   });
 
   describe("filter method", () => {

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

@@ -81,6 +81,16 @@ export class Filter
    */
   @Prop({ mutable: true }) filteredItems: object[] = [];
 
+  /**
+   * Specifies the fields to match against when filtering.
+   */
+  @Prop() matchFields: string[];
+
+  @Watch("matchFields")
+  matchFieldsHandler(): void {
+    this.filterDebounced(this.value);
+  }
+
   /**
    * Specifies placeholder text for the input element.
    */
@@ -159,7 +169,7 @@ export class Filter
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
     if (this.items.length) {
-      this.updateFiltered(filter(this.items, this.value));
+      this.updateFiltered(filter(this.items, this.value, this.matchFields));
     }
     await setUpMessages(this);
   }
@@ -223,7 +233,8 @@ export class Filter
 
   private filterDebounced = debounce(
     (value: string, emit = false, onFilter?: () => void): void =>
-      this.items.length && this.updateFiltered(filter(this.items, value), emit, onFilter),
+      this.items.length &&
+      this.updateFiltered(filter(this.items, value, this.matchFields), emit, onFilter),
     DEBOUNCE_TIMEOUT,
   );
 

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

@@ -365,12 +365,12 @@ describe("calcite-list", () => {
     const list = await page.find("calcite-list");
     await page.waitForTimeout(listDebounceTimeout);
 
-    expect(await list.getProperty("filteredItems")).toHaveLength(3);
-    expect(await list.getProperty("filteredData")).toHaveLength(3);
+    expect(await list.getProperty("filteredItems")).toHaveLength(2);
+    expect(await list.getProperty("filteredData")).toHaveLength(2);
 
     const visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])");
 
-    expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match", "value-match"]);
+    expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match"]);
   });
 
   it("should support shift click to select multiple items", async () => {

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

@@ -558,6 +558,7 @@ export class List
                         aria-label={filterPlaceholder}
                         disabled={disabled}
                         items={dataForFilter}
+                        matchFields={["label", "description", "metadata"]}
                         onCalciteFilterChange={this.handleFilterChange}
                         placeholder={filterPlaceholder}
                         ref={this.setFilterEl}

packages/calcite-components/src/utils/filter.spec.ts

@@ -0,0 +1,66 @@
+import { filter } from "./filter";
+
+describe("filter function", () => {
+  it("warns and returns empty array for empty data", () => {
+    const originalWarn = console.warn;
+    console.warn = jest.fn();
+    const result = filter([], "test");
+    expect(console.warn).toHaveBeenCalled();
+    expect(result).toEqual([]);
+    console.warn = originalWarn;
+  });
+
+  it("returns empty array when no objects match", () => {
+    const data = [{ name: "John" }, { name: "Jane" }];
+    const result = filter(data, "Doe");
+    expect(result).toEqual([]);
+  });
+
+  it("returns matching objects", () => {
+    const data = [{ name: "John" }, { name: "Jane" }];
+    const result = filter(data, "Jane");
+    expect(result).toEqual([{ name: "Jane" }]);
+  });
+
+  it("considers only specified fields for matching", () => {
+    const data = [
+      { name: "John", age: 30 },
+      { name: "Jane", age: 25 },
+    ];
+    const result = filter(data, "25", ["age"]);
+    expect(result).toEqual([{ name: "Jane", age: 25 }]);
+
+    const result2 = filter(data, "John", ["age"]);
+    expect(result2).toEqual([]);
+  });
+
+  it("ignores functions and null values in objects", () => {
+    const data = [{ name: "John", action: () => {}, value: null }];
+    const result = filter(data, "John");
+    expect(result).toEqual([{ name: "John", action: expect.any(Function), value: null }]);
+  });
+
+  it("searches nested objects correctly", () => {
+    const data = [{ name: "John", details: { age: 30 } }];
+    const result = filter(data, "30");
+    expect(result).toEqual([{ name: "John", details: { age: 30 } }]);
+  });
+
+  it("searches arrays in objects correctly", () => {
+    const data = [{ name: "John", tags: ["developer", "tester"] }];
+    const result = filter(data, "tester");
+    expect(result).toEqual([{ name: "John", tags: ["developer", "tester"] }]);
+  });
+
+  it("always includes objects with filterDisabled set to true", () => {
+    const data = [{ name: "John" }, { name: "Jane", filterDisabled: true }];
+    const result = filter(data, "Doe");
+    expect(result).toEqual([{ name: "Jane", filterDisabled: true }]);
+  });
+
+  it("always includes objects with constant set to true", () => {
+    const data = [{ name: "John" }, { name: "Jane", constant: true }];
+    const result = filter(data, "Doe");
+    expect(result).toEqual([{ name: "Jane", constant: true }]);
+  });
+});

packages/calcite-components/src/utils/filter.ts

@@ -1,6 +1,6 @@
 import { escapeRegExp, forIn } from "lodash-es";
 
-export const filter = (data: Array<object>, value: string): Array<any> => {
+export const filter = (data: Array<object>, value: string, matchFields?: string[]): Array<any> => {
   const escapedValue = escapeRegExp(value);
   const regex = new RegExp(escapedValue, "i");
 
@@ -9,16 +9,22 @@ export const filter = (data: Array<object>, value: string): Array<any> => {
     The data argument should be an array of objects`);
   }
 
-  const find = (input: object, RE: RegExp) => {
+  const find = (input: object, RE: RegExp, fields?: string[]) => {
     if ((input as any)?.constant || (input as any)?.filterDisabled) {
       return true;
     }
+
     let found = false;
 
-    forIn(input, (val) => {
+    forIn(input, (val: any, key) => {
       if (typeof val === "function" || val == null /* intentional == to catch undefined */) {
         return;
       }
+
+      if (fields && !fields.includes(key)) {
+        return;
+      }
+
       if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
         if (find(val, RE)) {
           found = true;
@@ -27,12 +33,9 @@ export const filter = (data: Array<object>, value: string): Array<any> => {
         found = true;
       }
     });
+
     return found;
   };
 
-  const result = data.filter((item) => {
-    return find(item, regex);
-  });
-
-  return result;
+  return data.filter((item) => find(item, regex, matchFields));
 };