fix(list, block-group): sort handle menu should respond to new lists or label changes

packages/calcite-components/src/components/block-group/block-group.e2e.ts

@@ -702,5 +702,48 @@ describe("calcite-block-group", () => {
       await assertMove("one", "component1", "component2", ["two"], ["one", "three"], 0, 0);
       await assertMove("three", "component2", "component1", ["three", "two"], ["one"], 0, 1);
     });
+
+    it("updates moveToItems label when menu is opened", async () => {
+      const page = await newE2EPage();
+      const group = "my-group";
+      await page.setContent(
+        html`<calcite-block-group label="Group 1" id="component1" group="${group}" drag-enabled>
+            <calcite-block id="one" heading="one" label="One"></calcite-block>
+            <calcite-block id="two" heading="two" label="Two"></calcite-block>
+          </calcite-block-group>
+          <calcite-block-group label="Group 2" id="component2" group="${group}" drag-enabled>
+            <calcite-block id="three" heading="three" label="Three"></calcite-block>
+          </calcite-block-group>`,
+      );
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.nextTick);
+
+      const component1 = await page.find("#component1");
+      const three = await page.find("#three");
+      three.setProperty("sortHandleOpen", true);
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.nextTick);
+
+      let moveToItems: string[] = await page.$eval("#three", (item: Block["el"]) =>
+        item.moveToItems.map((moveToItem) => moveToItem.label),
+      );
+      expect(moveToItems.length).toBe(1);
+      expect(moveToItems[0]).toBe("Group 1");
+
+      three.setProperty("sortHandleOpen", false);
+      await page.waitForChanges();
+
+      const newLabel = "New label";
+      component1.setProperty("label", newLabel);
+      three.setProperty("sortHandleOpen", true);
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.nextTick);
+
+      moveToItems = await page.$eval("#three", (item: Block["el"]) =>
+        item.moveToItems.map((moveToItem) => moveToItem.label),
+      );
+      expect(moveToItems.length).toBe(1);
+      expect(moveToItems[0]).toBe(newLabel);
+    });
   });
 });

packages/calcite-components/src/components/block-group/block-group.tsx

@@ -180,6 +180,7 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort
       "calciteInternalAssistiveTextChange",
       this.handleCalciteInternalAssistiveTextChange,
     );
+    this.listen("calciteBlockSortHandleBeforeOpen", this.updateBlockItemsDebounced);
     this.listen("calciteSortHandleReorder", this.handleSortReorder);
     this.listen("calciteSortHandleMove", this.handleSortMove);
     this.listen("calciteSortHandleAdd", this.handleSortAdd);

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

@@ -2199,6 +2199,49 @@ describe("calcite-list", () => {
       await assertMove("one", "list1", "list2", ["two"], ["one", "three"], 0, 0);
       await assertMove("three", "list2", "list1", ["three", "two"], ["one"], 0, 1);
     });
+
+    it("updates moveToItems label when menu is opened", async () => {
+      const page = await newE2EPage();
+      const group = "my-group";
+      await page.setContent(
+        html`<calcite-list label="Group 1" id="component1" group="${group}" drag-enabled>
+            <calcite-list-item id="one" heading="one" label="One"></calcite-list-item>
+            <calcite-list-item id="two" heading="two" label="Two"></calcite-list-item>
+          </calcite-list>
+          <calcite-list label="Group 2" id="component2" group="${group}" drag-enabled>
+            <calcite-list-item id="three" heading="three" label="Three"></calcite-list-item>
+          </calcite-list>`,
+      );
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.nextTick);
+
+      const component1 = await page.find("#component1");
+      const three = await page.find("#three");
+      three.setProperty("sortHandleOpen", true);
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.nextTick);
+
+      let moveToItems: string[] = await page.$eval("#three", (item: ListItem["el"]) =>
+        item.moveToItems.map((moveToItem) => moveToItem.label),
+      );
+      expect(moveToItems.length).toBe(1);
+      expect(moveToItems[0]).toBe("Group 1");
+
+      three.setProperty("sortHandleOpen", false);
+      await page.waitForChanges();
+
+      const newLabel = "New label";
+      component1.setProperty("label", newLabel);
+      three.setProperty("sortHandleOpen", true);
+      await page.waitForChanges();
+      await page.waitForTimeout(DEBOUNCE.nextTick);
+
+      moveToItems = await page.$eval("#three", (item: ListItem["el"]) =>
+        item.moveToItems.map((moveToItem) => moveToItem.label),
+      );
+      expect(moveToItems.length).toBe(1);
+      expect(moveToItems[0]).toBe(newLabel);
+    });
   });
 
   describe.skip("group filtering", () => {

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

@@ -367,6 +367,7 @@ export class List extends LitElement implements InteractiveComponent, SortableCo
       "calciteInternalAssistiveTextChange",
       this.handleCalciteInternalAssistiveTextChange,
     );
+    this.listen("calciteListItemSortHandleBeforeOpen", this.updateListItemsDebounced);
     this.listen("calciteSortHandleReorder", this.handleSortReorder);
     this.listen("calciteSortHandleMove", this.handleSortMove);
     this.listen("calciteSortHandleAdd", this.handleSortAdd);