feat(list): Specify the element types in the calciteListOrderChange…

… event detail. (#8123)

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

@@ -0,0 +1,7 @@
+import { DragDetail } from "../../utils/sortableComponent";
+
+export interface ListDragDetail extends DragDetail {
+  toEl: HTMLCalciteListElement;
+  fromEl: HTMLCalciteListElement;
+  dragEl: HTMLCalciteListItemElement;
+}

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

@@ -27,7 +27,6 @@ import { MAX_COLUMNS } from "../list-item/resources";
 import { getListItemChildren, updateListItemChildren } from "../list-item/utils";
 import { CSS, debounceTimeout, SelectionAppearance, SLOTS } from "./resources";
 import {
-  DragDetail,
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
@@ -46,6 +45,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { HandleNudge } from "../handle/interfaces";
+import { ListDragDetail } from "./interfaces";
 
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
@@ -74,12 +74,12 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   /**
    * When provided, the method will be called to determine whether the element can  move from the list.
    */
-  @Prop() canPull: (detail: DragDetail) => boolean;
+  @Prop() canPull: (detail: ListDragDetail) => boolean;
 
   /**
    * When provided, the method will be called to determine whether the element can be added from another list.
    */
-  @Prop() canPut: (detail: DragDetail) => boolean;
+  @Prop() canPut: (detail: ListDragDetail) => boolean;
 
   /**
    * When `true`, `calcite-list-item`s are sortable via a draggable button.
@@ -192,7 +192,7 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   /**
    * Emitted when the order of the list has changed.
    */
-  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<DragDetail>;
+  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<ListDragDetail>;
 
   /**
    * Emitted when the default slot has changes in order to notify parent lists.
@@ -485,7 +485,7 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
     this.connectObserver();
   }
 
-  onDragSort(detail: DragDetail): void {
+  onDragSort(detail: ListDragDetail): void {
     this.setParentList();
     this.updateListItems();
 
@@ -755,7 +755,7 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
       (el: HTMLElement) => el.tagName === "CALCITE-LIST-ITEM"
     ) as HTMLCalciteListItemElement;
 
-    const parentEl = sortItem?.parentElement;
+    const parentEl = sortItem?.parentElement as HTMLCalciteListElement;
 
     if (!parentEl) {
       return;

packages/calcite-components/src/index.ts

@@ -9,4 +9,5 @@ export * from "./components";
 // For more details, see: https://github.com/Esri/calcite-design-system/pull/8177
 export { HandleChange } from "./components/handle/interfaces";
 export { HandleNudge } from "./components/handle/interfaces";
+export { ListDragDetail } from "./components/list/interfaces";
 export { DragDetail } from "./utils/sortableComponent";