fix(list, sortable-list, value-list): Emit calciteListOrderChange when dragging between lists

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

@@ -31,6 +31,7 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
+  dragActive,
 } from "../../utils/sortableComponent";
 import { SLOTS as STACK_SLOTS } from "../stack/resources";
 
@@ -294,6 +295,10 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
+    if (dragActive()) {
+      return;
+    }
+
     this.connectObserver();
     this.updateListItems();
     this.setUpSorting();
@@ -302,6 +307,10 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   }
 
   disconnectedCallback(): void {
+    if (dragActive()) {
+      return;
+    }
+
     this.disconnectObserver();
     disconnectSortableComponent(this);
     disconnectInteractive(this);
@@ -477,6 +486,7 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   }
 
   onDragSort(event: SortableEvent): void {
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
     this.updateListItems();
 
     const { from, item, to } = event;

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

@@ -15,6 +15,7 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
+  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 
@@ -100,12 +101,20 @@ export class SortableList implements InteractiveComponent, SortableComponent {
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
+    if (dragActive()) {
+      return;
+    }
+
     this.setUpSorting();
     this.beginObserving();
     connectInteractive(this);
   }
 
   disconnectedCallback(): void {
+    if (dragActive()) {
+      return;
+    }
+
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     this.endObserving();

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

@@ -66,6 +66,7 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
+  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 
@@ -238,6 +239,10 @@ export class ValueList<
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
+    if (dragActive()) {
+      return;
+    }
+
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -261,6 +266,10 @@ export class ValueList<
   }
 
   disconnectedCallback(): void {
+    if (dragActive()) {
+      return;
+    }
+
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);

packages/calcite-components/src/utils/sortableComponent.ts

@@ -1,7 +1,5 @@
 import Sortable from "sortablejs";
-import { containsCrossShadowBoundary } from "./dom";
 const sortableComponentSet = new Set<SortableComponent>();
-const inactiveSortableComponentSet = new WeakSet<SortableComponent>();
 
 export interface DragEvent {
   toEl: HTMLElement;
@@ -59,14 +57,14 @@ export interface SortableComponent {
   onDragSort: (event: Sortable.SortableEvent) => void;
 
   /**
-   * Element dragging started.
+   * Called when a sortable component drag starts.
    */
-  onDragStart?: (event: Sortable.SortableEvent) => void;
+  onDragStart: () => void;
 
   /**
-   * Element dragging ended.
+   * Called when a sortable component drag ends.
    */
-  onDragEnd?: (event: Sortable.SortableEvent) => void;
+  onDragEnd: () => void;
 }
 
 /**
@@ -78,10 +76,6 @@ export function connectSortableComponent(component: SortableComponent): void {
   disconnectSortableComponent(component);
   sortableComponentSet.add(component);
 
-  if (inactiveSortableComponentSet.has(component)) {
-    return;
-  }
-
   const dataIdAttr = "id";
   const { group, handleSelector: handle, dragSelector: draggable } = component;
 
@@ -100,13 +94,13 @@ export function connectSortableComponent(component: SortableComponent): void {
       },
     }),
     handle,
-    onStart: (event) => {
-      onSortingStart(component);
-      component.onDragStart(event);
+    onStart: () => {
+      dragState.active = true;
+      onDragStart();
     },
-    onEnd: (event) => {
-      onSortingEnd(component);
-      component.onDragEnd(event);
+    onEnd: () => {
+      dragState.active = false;
+      onDragEnd();
     },
     onSort: (event) => {
       component.onDragSort(event);
@@ -122,34 +116,25 @@ export function connectSortableComponent(component: SortableComponent): void {
 export function disconnectSortableComponent(component: SortableComponent): void {
   sortableComponentSet.delete(component);
 
-  if (inactiveSortableComponentSet.has(component)) {
-    return;
-  }
-
   component.sortable?.destroy();
   component.sortable = null;
 }
 
-function getNestedSortableComponents(activeComponent: SortableComponent): SortableComponent[] {
-  return Array.from(sortableComponentSet).filter(
-    (component) => component !== activeComponent && containsCrossShadowBoundary(activeComponent.el, component.el)
-  );
-}
+const dragState: { active: boolean } = { active: false };
 
 /**
- * Helper to handle nested SortableComponents on `Sortable.onStart`.
+ * Helper to determine if dragging is currently active.
  *
- * @param {SortableComponent} activeComponent - The active sortable component.
+ * @returns {boolean} a boolean value.
  */
-function onSortingStart(activeComponent: SortableComponent): void {
-  getNestedSortableComponents(activeComponent).forEach((component) => inactiveSortableComponentSet.add(component));
+export function dragActive(): boolean {
+  return dragState.active;
 }
 
-/**
- * Helper to handle nested SortableComponents on `Sortable.onEnd`.
- *
- * @param {SortableComponent} activeComponent - The active sortable component.
- */
-function onSortingEnd(activeComponent: SortableComponent): void {
-  getNestedSortableComponents(activeComponent).forEach((component) => inactiveSortableComponentSet.delete(component));
+function onDragStart(): void {
+  Array.from(sortableComponentSet).forEach((component) => component.onDragStart());
+}
+
+function onDragEnd(): void {
+  Array.from(sortableComponentSet).forEach((component) => component.onDragEnd());
 }