From 7070c90108ebe245c5f9e2eb6617e95bf26500d7 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 15 Dec 2023 15:37:20 -0800
Subject: [PATCH] feat(list): Add drag event details to calciteListDragStart
 and calciteListDragEnd events. #8437

---
 .../src/components/list/list.e2e.ts           | 24 +++++++++++++++----
 .../src/components/list/list.tsx              |  8 +++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 451634335b1..9ad63ed58fd 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -6,7 +6,7 @@ import { debounceTimeout } from "./resources";
 import { CSS } from "../list-item/resources";
 import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources";
 import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";
-import { DragDetail } from "../../utils/sortableComponent";
+import { ListDragDetail } from "./interfaces";
 
 const placeholder = placeholderImage({
   width: 140,
@@ -733,6 +733,10 @@ describe("calcite-list", () => {
       oldIndex: number;
       startCalledTimes: number;
       endCalledTimes: number;
+      endNewIndex: number;
+      endOldIndex: number;
+      startNewIndex: number;
+      startOldIndex: number;
     }>;
 
     it("works using a mouse", async () => {
@@ -746,16 +750,20 @@ describe("calcite-list", () => {
         testWindow.oldIndex = -1;
         testWindow.startCalledTimes = 0;
         testWindow.endCalledTimes = 0;
-        list.addEventListener("calciteListOrderChange", (event: CustomEvent<DragDetail>) => {
+        list.addEventListener("calciteListOrderChange", (event: CustomEvent<ListDragDetail>) => {
           testWindow.calledTimes++;
           testWindow.newIndex = event?.detail?.newIndex;
           testWindow.oldIndex = event?.detail?.oldIndex;
         });
-        list.addEventListener("calciteListDragEnd", () => {
+        list.addEventListener("calciteListDragEnd", (event: CustomEvent<ListDragDetail>) => {
           testWindow.endCalledTimes++;
+          testWindow.endNewIndex = event.detail.newIndex;
+          testWindow.endOldIndex = event.detail.oldIndex;
         });
-        list.addEventListener("calciteListDragStart", () => {
+        list.addEventListener("calciteListDragStart", (event: CustomEvent<ListDragDetail>) => {
           testWindow.startCalledTimes++;
+          testWindow.startNewIndex = event.detail.newIndex;
+          testWindow.startOldIndex = event.detail.oldIndex;
         });
       });
 
@@ -785,6 +793,10 @@ describe("calcite-list", () => {
           newIndex: testWindow.newIndex,
           endCalledTimes: testWindow.endCalledTimes,
           startCalledTimes: testWindow.startCalledTimes,
+          endNewIndex: testWindow.endNewIndex,
+          endOldIndex: testWindow.endOldIndex,
+          startNewIndex: testWindow.startNewIndex,
+          startOldIndex: testWindow.startOldIndex,
         };
       });
 
@@ -793,6 +805,10 @@ describe("calcite-list", () => {
       expect(results.endCalledTimes).toBe(1);
       expect(results.oldIndex).toBe(0);
       expect(results.newIndex).toBe(1);
+      expect(results.startNewIndex).toBe(null);
+      expect(results.startOldIndex).toBe(0);
+      expect(results.endNewIndex).toBe(1);
+      expect(results.endOldIndex).toBe(0);
     });
 
     it("supports dragging items between lists", async () => {
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index b10cd486b6f..44331d6c61f 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -616,12 +616,12 @@ export class List
     this.connectObserver();
   }
 
-  onDragEnd(): void {
-    this.calciteListDragEnd.emit();
+  onDragEnd(detail: ListDragDetail): void {
+    this.calciteListDragEnd.emit(detail);
   }
 
-  onDragStart(): void {
-    this.calciteListDragStart.emit();
+  onDragStart(detail: ListDragDetail): void {
+    this.calciteListDragStart.emit(detail);
   }
 
   onDragSort(detail: ListDragDetail): void {