feat: lists react to value prop changes in items

src/components/calcite-pick-list-item/calcite-pick-list-item.tsx

@@ -98,6 +98,10 @@ export class CalcitePickListItem {
    */
   @Prop({ reflect: true }) value!: string;
 
+  @Watch("value") valueWatchHandler(newValue, oldValue) {
+    this.calciteListItemValueChange.emit({ oldValue, newValue });
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -127,6 +131,13 @@ export class CalcitePickListItem {
    */
   @Event() calciteListItemPropsUpdated: EventEmitter;
 
+  /**
+   * Emitted whenever the the item's value property is modified.
+   * @event calciteListItemValueChange
+   * @internal
+   */
+  @Event() calciteListItemValueChange: EventEmitter;
+
   // --------------------------------------------------------------------------
   //
   //  Public Methods

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

@@ -19,6 +19,7 @@ const {
   initializeObserver,
   cleanUpObserver,
   calciteListItemChangeHandler,
+  calciteListItemValueChangeHandler,
   setUpItems,
   deselectSiblingItems,
   selectSiblings,
@@ -135,6 +136,10 @@ export class CalcitePickList {
     this.setUpFilter();
   }
 
+  @Listen("calciteListItemValueChange") calciteListItemValueChangeHandler(event: CustomEvent) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods

src/components/calcite-pick-list/shared-list-logic.ts

@@ -51,6 +51,15 @@ export const sharedListMethods = {
     this.lastSelectedItem = item;
     this.emitCalciteListChange();
   },
+  calciteListItemValueChangeHandler(this: CalcitePickList | CalciteValueList, event: CustomEvent): void {
+    event.stopPropagation();
+    const oldValue = event.detail.oldValue;
+    if (this.selectedValues.has(oldValue)) {
+      const item = this.selectedValues.get(oldValue);
+      this.selectedValues.delete(oldValue);
+      this.selectedValues.set(event.detail.newValue, item);
+    }
+  },
   // --------------------------------------------------------------------------
   //
   //  Private Methods

src/components/calcite-pick-list/shared-list-tests.ts

@@ -147,6 +147,49 @@ export const tests = {
         expect(properties.get("hasItem")._remoteObject.value).toBe(true);
       });
     });
+    describe("value changes after item is selected", () => {
+      it("should update the value in selectedValues map", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-${listType}-list>
+          <calcite-${listType}-list-item value="one" text-label="One" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" text-label="Two" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="three" text-label="Three" selected></calcite-${listType}-list-item>
+        </calcite-${listType}-list>`);
+
+        const list = await page.find(`calcite-${listType}-list`);
+        const item1 = await list.find("[value=one]");
+        await item1.click();
+
+        const hasValueOne = await page.evaluate((type) => {
+          const pageList: HTMLCalcitePickListElement | HTMLCalciteValueListElement = document.querySelector(
+            `calcite-${type}-list`
+          );
+          return pageList.getSelectedItems().then((result) => {
+            return result.has("one");
+          });
+        }, listType);
+
+        expect(hasValueOne).toBe(true);
+
+        item1.setProperty("value", "four");
+        await page.waitForChanges();
+
+        const hasValues = await page.evaluate((type) => {
+          const pageList: HTMLCalcitePickListElement | HTMLCalciteValueListElement = document.querySelector(
+            `calcite-${type}-list`
+          );
+          return pageList.getSelectedItems().then((result) => {
+            return {
+              four: result.has("four"),
+              one: result.has("one")
+            };
+          });
+        }, listType);
+
+        expect(hasValues.one).toBe(false);
+        expect(hasValues.four).toBe(true);
+      });
+    });
   },
   filterBehavior(listType: "pick" | "value") {
     let page: E2EPage = null;

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

@@ -21,6 +21,7 @@ const {
   initializeObserver,
   cleanUpObserver,
   calciteListItemChangeHandler,
+  calciteListItemValueChangeHandler,
   setUpItems,
   deselectSiblingItems,
   selectSiblings,
@@ -152,6 +153,10 @@ export class CalciteValueList {
     this.setUpFilter();
   }
 
+  @Listen("calciteListItemValueChange") calciteListItemValueChangeHandler(event: CustomEvent) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods

src/demos/value-list/valueUpdate.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Demos - ValueList</title>
+    <script src="../_assets/head.js"></script>
+    <script src="../_assets/toggles.js"></script>
+  </head>
+  <body>
+    <main>
+      <section class="example-container">
+        <h1>calcite-value-list</h1>
+        <p>
+          see the
+          <a
+            href="https://github.com/Esri/calcite-app-components/tree/master/src/components/calcite-value-list/readme.md"
+            >calcite-value-list readme.</a
+          >
+        </p>
+
+        <h3>multiple</h3>
+        <calcite-value-list id="one">
+          <calcite-action slot="menu-actions" indicator text="Cool">
+            <calcite-icon icon="hamburger" scale="s"></calcite-icon>
+          </calcite-action>
+          <calcite-value-list-item text-label="Dogs" text-description="Man's best friend" value="dogs">
+            <calcite-action slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+              <calcite-icon icon="x" scale="s"></calcite-icon>
+            </calcite-action>
+          </calcite-value-list-item>
+          <calcite-value-list-item text-label="Cats" text-description="Independent and fluffy" value="cats">
+            <calcite-action slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+              <calcite-icon icon="x" scale="s"></calcite-icon>
+            </calcite-action>
+          </calcite-value-list-item>
+          <calcite-value-list-item
+            text-label="Fish. But not just any fish, a tiger fish caught live in the Atlantic Ocean while on vacation."
+            text-description="Easy to care for."
+            value="fish"
+          >
+            <calcite-action slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+              <calcite-icon icon="x" scale="s"></calcite-icon>
+            </calcite-action>
+          </calcite-value-list-item>
+        </calcite-value-list>
+        <button id="click">Click</button>
+        <script>
+          document.querySelector("#click").addEventListener("click", (event) => {
+            const valueList = document.querySelector("#one");
+            valueList.querySelector("calcite-value-list-item").value = "not dogs";
+          });
+        </script>
+      </section>
+    </main>
+  </body>
+</html>