@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

package/dist/collection/components/dropdown/dropdown.js

@@ -1,17 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements } from "../../utils/floating-ui";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
+import { debounce } from "lodash-es";
 /**
  * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
@@ -78,6 +79,7 @@ export class Dropdown {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.slotChangeHandler = (event) => {
       this.defaultAssignedElements = event.target.assignedElements({
         flatten: true
@@ -94,14 +96,14 @@ export class Dropdown {
       this.triggers = event.target.assignedElements({
         flatten: true
       });
-      this.reposition();
+      this.debouncedReposition();
     };
     this.updateItems = () => {
       this.items = this.groups
         .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
-      this.reposition();
+      this.debouncedReposition();
     };
     this.updateGroups = (event) => {
       const groups = event.target
@@ -134,10 +136,10 @@ export class Dropdown {
       if (!scrollerEl) {
         return;
       }
-      this.reposition();
+      this.debouncedReposition();
       const maxScrollerHeight = this.getMaxScrollerHeight();
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-      this.reposition();
+      this.debouncedReposition();
     };
     this.setScrollerAndTransitionEl = (el) => {
       this.resizeObserver.observe(el);
@@ -203,7 +205,7 @@ export class Dropdown {
   }
   openHandler(value) {
     if (!this.disabled) {
-      this.reposition();
+      this.debouncedReposition();
       this.active = value;
       return;
     }
@@ -216,16 +218,16 @@ export class Dropdown {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.reposition();
+    this.debouncedReposition();
   }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
   overlayPositioningHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   placementHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   //--------------------------------------------------------------------------
   //
@@ -236,7 +238,7 @@ export class Dropdown {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    this.reposition();
+    this.debouncedReposition();
     if (this.open) {
       this.openHandler(this.open);
     }
@@ -246,7 +248,7 @@ export class Dropdown {
     connectOpenCloseComponent(this);
   }
   componentDidLoad() {
-    this.reposition();
+    this.debouncedReposition();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -556,7 +558,7 @@ export class Dropdown {
         "text": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\nthis value does not include groupTitles passed to calcite-dropdown-group"
       },
       "attribute": "max-items",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "0"
     },
     "overlayPositioning": {
@@ -579,7 +581,7 @@ export class Dropdown {
         "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"absolute\""
     },
     "placement": {

package/dist/collection/components/dropdown/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export {};

package/dist/collection/components/dropdown/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"

package/dist/collection/components/dropdown-group/dropdown-group.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/dropdown-group/dropdown-group.e2e.js

@@ -0,0 +1,5 @@
+import { renders, hidden } from "../../tests/commonTests";
+describe("calcite-dropdown-group", () => {
+    it("renders", () => renders("calcite-dropdown-group", { display: "block" }));
+    it("honors hidden attribute", async () => hidden("calcite-dropdown-group"));
+});

package/dist/collection/components/dropdown-group/dropdown-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";

package/dist/collection/components/dropdown-group/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export {};

package/dist/collection/components/dropdown-group/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   containerSmall: "container--s",

package/dist/collection/components/dropdown-item/dropdown-item.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */
@@ -137,8 +142,7 @@
   cursor: pointer;
   align-items: center;
   color: var(--calcite-ui-text-3);
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   text-align: start;
@@ -171,8 +175,7 @@
   cursor: pointer;
   align-items: center;
   color: var(--calcite-ui-text-3);
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -205,8 +208,7 @@
 :host(:active) .container {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
 }
 
 :host(:hover) .container--link .dropdown-link, 
@@ -216,8 +218,7 @@
 
 :host(:focus) .container {
   color: var(--calcite-ui-text-1);
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
 }
 
 :host(:active) .container {

package/dist/collection/components/dropdown-item/dropdown-item.e2e.js

@@ -0,0 +1,6 @@
+import { focusable, renders, hidden } from "../../tests/commonTests";
+describe("calcite-dropdown-item", () => {
+    it("renders", () => renders("calcite-dropdown-item", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-dropdown-item"));
+    it("can be focused", async () => focusable(`calcite-dropdown-item`));
+});

package/dist/collection/components/dropdown-item/dropdown-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -327,7 +327,7 @@ export class DropdownItem {
         "text": "The rel attribute to apply to the hyperlink"
       },
       "attribute": "rel",
-      "reflect": false
+      "reflect": true
     },
     "target": {
       "type": "string",
@@ -344,7 +344,7 @@ export class DropdownItem {
         "text": "The target attribute to apply to the hyperlink"
       },
       "attribute": "target",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get events() { return [{

package/dist/collection/components/dropdown-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   containerLink: "container--link",

package/dist/collection/components/fab/fab.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/fab/fab.e2e.js

@@ -0,0 +1,114 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, disabled, hidden, renders } from "../../tests/commonTests";
+import { CSS } from "./resources";
+import { defaults } from "../../tests/commonTests";
+describe("calcite-fab", () => {
+    it("renders", async () => renders("calcite-fab", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-fab"));
+    it("has property defaults", async () => defaults("calcite-fab", [
+        {
+            propertyName: "scale",
+            defaultValue: "m"
+        },
+        {
+            propertyName: "appearance",
+            defaultValue: "outline"
+        }
+    ]));
+    it("can be disabled", () => disabled("calcite-fab"));
+    it(`should set all internal calcite-button types to 'button'`, async () => {
+        const page = await newE2EPage({
+            html: "<calcite-fab></calcite-fab>"
+        });
+        const buttons = await page.findAll("calcite-fab >>> calcite-button");
+        expect(buttons).toHaveLength(1);
+        for (const button of buttons) {
+            expect(await button.getProperty("type")).toBe("button");
+        }
+    });
+    it("should have visible text when text is enabled", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-fab text="hello world" text-enabled></calcite-fab>`);
+        const button = await page.find(`calcite-fab >>> .${CSS.button}`);
+        const text = button.textContent;
+        expect(text).toBe("hello world");
+    });
+    it("should not have a tooltip when text-enabled", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-fab text="hello world" text-enabled></calcite-fab>`);
+        const button = await page.find(`calcite-fab >>> .${CSS.button}`);
+        expect(button.getAttribute("title")).toBe(null);
+    });
+    it("should have a tooltip when not text-enabled", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-fab text="hello world"></calcite-fab>`);
+        const button = await page.find(`calcite-fab >>> .${CSS.button}`);
+        expect(button.getAttribute("title")).toBe("hello world");
+        const fab = await page.find("calcite-fab");
+        fab.setProperty("label", "label");
+        await page.waitForChanges();
+        expect(button.getAttribute("title")).toBe("label");
+    });
+    it("should not have visible text when text is not enabled", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-fab text="hello world"></calcite-fab>`);
+        const button = await page.find(`calcite-fab >>> .${CSS.button}`);
+        const text = button.textContent;
+        expect(text).toBe("");
+    });
+    it("should have label", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-fab text="hello world" label="hi"></calcite-fab>`);
+        const calciteButton = await page.find(`calcite-fab >>> .${CSS.button}`);
+        expect(calciteButton.getAttribute("title")).toBe("hi");
+        expect(await calciteButton.getProperty("label")).toBe("hi");
+    });
+    it("should have appearance=outline", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-fab text="hello world"></calcite-fab>`);
+        const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
+        expect(fab.getAttribute("appearance")).toBe("outline");
+    });
+    it("should have appearance=solid", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-fab appearance="solid" text="hello world"></calcite-fab>`);
+        const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
+        expect(fab.getAttribute("appearance")).toBe("solid");
+    });
+    it("should be accessible", async () => {
+        await accessible(`<calcite-fab label="hello world" text="hello world"></calcite-fab>`);
+        await accessible(`<calcite-fab label="hello world" text="hello world" disabled text-enabled></calcite-fab>`);
+    });
+    describe("when invalid appearance values are passed", () => {
+        describe("when value is 'transparent'", () => {
+            it("should render with default 'outline' appearance", async () => {
+                const page = await newE2EPage({
+                    html: `
+          <calcite-fab
+            text="FAB"
+            text-enabled
+            appearance="transparent"
+          ></calcite-fab>
+          `
+                });
+                const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
+                expect(fab.getAttribute("appearance")).toBe("outline");
+            });
+        });
+        describe("when value is 'clear'", () => {
+            it("should render with default 'outline' appearance", async () => {
+                const page = await newE2EPage({
+                    html: `
+          <calcite-fab
+            text="FAB"
+            text-enabled
+            appearance="clear"
+          ></calcite-fab>
+          `
+                });
+                const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
+                expect(fab.getAttribute("appearance")).toBe("outline");
+            });
+        });
+    });
+});

package/dist/collection/components/fab/fab.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
@@ -168,7 +168,7 @@ export class Fab {
         "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
       },
       "attribute": "icon",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "ICONS.plus"
     },
     "label": {

package/dist/collection/components/fab/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   button: "button"

package/dist/collection/components/filter/filter.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/filter/filter.e2e.js

@@ -0,0 +1,205 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, disabled, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+import { DEBOUNCE_TIMEOUT } from "./resources";
+import { CSS as INPUT_CSS } from "../input/resources";
+describe("calcite-filter", () => {
+    it("renders", async () => renders("calcite-filter", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-filter"));
+    it("is accessible", async () => accessible("calcite-filter"));
+    it("is focusable", async () => focusable("calcite-filter"));
+    it("can be disabled", () => disabled("calcite-filter"));
+    it("reflects", async () => reflects("calcite-filter", [
+        {
+            propertyName: "disabled",
+            value: true
+        },
+        {
+            propertyName: "scale",
+            value: "s"
+        }
+    ]));
+    it("has defaults", async () => defaults("calcite-filter", [
+        {
+            propertyName: "disabled",
+            defaultValue: false
+        },
+        {
+            propertyName: "filteredItems",
+            defaultValue: []
+        },
+        {
+            propertyName: "scale",
+            defaultValue: "m"
+        }
+    ]));
+    it("sets scale on the input", async () => {
+        const scale = "s";
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-filter scale="${scale}"></calcite-filter>`);
+        const input = await page.find(`calcite-filter >>> calcite-input`);
+        expect(await input.getProperty("scale")).toBe(scale);
+    });
+    describe("strings", () => {
+        it("should update the filter placeholder when a string is provided", async () => {
+            const page = await newE2EPage();
+            const placeholderText = "placeholder";
+            await page.setContent(`<calcite-filter placeholder="${placeholderText}"></calcite-filter>`);
+            const input = await page.find(`calcite-filter >>> calcite-input`);
+            expect(await input.getProperty("placeholder")).toBe(placeholderText);
+        });
+    });
+    describe("clear button", () => {
+        let page;
+        beforeEach(async () => {
+            page = await newE2EPage();
+            await page.setContent("<calcite-filter></calcite-filter>");
+            await page.evaluate(() => {
+                const filter = document.querySelector("calcite-filter");
+                filter.items = [{ foo: "bar" }];
+            });
+        });
+        describe("clearing value", () => {
+            const filterIsFocused = async () => page.evaluate(() => document.querySelector("calcite-filter") === document.activeElement);
+            it("should clear the value in the input when pressed", async () => {
+                const filter = await page.find("calcite-filter");
+                await filter.callMethod("setFocus");
+                await page.keyboard.type("developer");
+                await page.waitForChanges();
+                expect(await filter.getProperty("value")).toBe("developer");
+                await page.$eval("calcite-filter", async (filter, buttonSelector) => {
+                    return filter.shadowRoot
+                        .querySelector("calcite-input")
+                        .shadowRoot.querySelector(buttonSelector)
+                        .click();
+                }, `.${INPUT_CSS.clearButton}`);
+                await page.waitForChanges();
+                expect(await filter.getProperty("value")).toBe("");
+                expect(await filterIsFocused()).toBe(true);
+            });
+            it("should clear the value in the input when the Escape key is pressed", async () => {
+                const filter = await page.find("calcite-filter");
+                await filter.callMethod("setFocus");
+                await page.keyboard.type("developer");
+                await page.waitForChanges();
+                await page.keyboard.press("Escape");
+                await page.waitForChanges();
+                expect(await filter.getProperty("value")).toBe("");
+                expect(await filterIsFocused()).toBe(true);
+            });
+        });
+    });
+    function assertMatchingItems(filtered, values) {
+        expect(filtered).toHaveLength(values.length);
+        values.forEach((value) => expect(filtered.find((element) => element.value === value)).toBeDefined());
+    }
+    describe("filter behavior", () => {
+        let page;
+        beforeEach(async () => {
+            page = await newE2EPage();
+            await page.setContent("<calcite-filter></calcite-filter>");
+            await page.evaluate(() => {
+                const filter = document.querySelector("calcite-filter");
+                filter.items = [
+                    {
+                        name: "Harry",
+                        description: "developer",
+                        value: "harry",
+                        metadata: { haircolor: "red", favoriteBand: "MetallicA" }
+                    },
+                    {
+                        name: "Matt",
+                        description: "developer",
+                        value: "matt",
+                        metadata: { haircolor: "black", favoriteBand: "Radiohead" }
+                    },
+                    {
+                        name: "Franco",
+                        description: "developer",
+                        value: "franco",
+                        metadata: { haircolor: "black", favoriteBand: "The Mars Volta" }
+                    },
+                    {
+                        name: "Katy",
+                        description: "engineer",
+                        value: "katy",
+                        metadata: { haircolor: "red", favoriteBand: "unknown" }
+                    },
+                    {
+                        name: "Jon",
+                        description: "developer",
+                        value: "jon",
+                        metadata: { haircolor: "brown", favoriteBand: "Hippity Hops" }
+                    },
+                    {
+                        name: "regex",
+                        description: "regex",
+                        value: "regex",
+                        metadata: { haircolor: "rainbow", favoriteBand: "regex()" }
+                    }
+                ];
+            });
+        });
+        it("updates filtered items after filtering", async () => {
+            const filterChangeSpy = await page.spyOnEvent("calciteFilterChange");
+            const waitForEvent = page.waitForEvent("calciteFilterChange");
+            const filter = await page.find("calcite-filter");
+            await filter.callMethod("setFocus");
+            await filter.type("developer");
+            await waitForEvent;
+            expect(filterChangeSpy).toHaveReceivedEventTimes(1);
+            assertMatchingItems(await filter.getProperty("filteredItems"), ["harry", "matt", "franco", "jon"]);
+            await page.evaluate(() => {
+                const filter = document.querySelector("calcite-filter");
+                filter.items = filter.items.slice(3);
+            });
+            await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+            assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]);
+            expect(filterChangeSpy).toHaveReceivedEventTimes(1);
+        });
+        it("searches recursively in items and works and matches on a partial string ignoring case", async () => {
+            const waitForEvent = page.waitForEvent("calciteFilterChange");
+            const filter = await page.find("calcite-filter");
+            await filter.callMethod("setFocus");
+            await filter.type("volt");
+            await waitForEvent;
+            assertMatchingItems(await filter.getProperty("filteredItems"), ["franco"]);
+        });
+        it("should escape regex", async () => {
+            const waitForEvent = page.waitForEvent("calciteFilterChange");
+            const filter = await page.find("calcite-filter");
+            await filter.callMethod("setFocus");
+            await filter.type("regex()");
+            await waitForEvent;
+            assertMatchingItems(await filter.getProperty("filteredItems"), ["regex"]);
+        });
+    });
+    describe("filter behavior with predefined value prop", () => {
+        let page;
+        beforeEach(async () => {
+            page = await newE2EPage();
+            await page.setContent(`<calcite-filter value="harry"></calcite-filter>`);
+            await page.evaluate(() => {
+                const filter = document.querySelector("calcite-filter");
+                filter.items = [
+                    {
+                        name: "Harry",
+                        description: "developer",
+                        value: "harry",
+                        metadata: { haircolor: "red", favoriteBand: "MetallicA" }
+                    },
+                    {
+                        name: "Matt",
+                        description: "developer",
+                        value: "matt",
+                        metadata: { haircolor: "black", favoriteBand: "Radiohead" }
+                    }
+                ];
+            });
+        });
+        it("should return matching value", async () => {
+            const filter = await page.find("calcite-filter");
+            await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+            assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]);
+        });
+    });
+});