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

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

@@ -236,7 +236,7 @@ export class ListItem
 
   @Listen("calciteInternalListItemGroupDefaultSlotChange")
   @Listen("calciteInternalListDefaultSlotChange")
-  handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void {
+  handleCalciteInternalListDefaultSlotChanges(event: CustomEvent<void>): void {
     event.stopPropagation();
     this.handleOpenableChange(this.defaultSlotEl);
   }

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

@@ -471,6 +471,7 @@ describe("calcite-list", () => {
 
     it("works using a mouse", async () => {
       const page = await createSimpleList();
+      //const listOrderChangeSpy = await page.spyOnEvent("calciteListOrderChange");
 
       await dragAndDrop(
         page,
@@ -487,6 +488,8 @@ describe("calcite-list", () => {
       const [first, second] = await page.findAll("calcite-list-item");
       expect(await first.getProperty("value")).toBe("two");
       expect(await second.getProperty("value")).toBe("one");
+      await page.waitForChanges();
+      //expect(listOrderChangeSpy).toHaveReceivedEventTimes(1);
     });
 
     it("supports dragging items between lists", async () => {
@@ -514,6 +517,8 @@ describe("calcite-list", () => {
         </calcite-list>
       `);
 
+      //const listOrderChangeSpy = await page.spyOnEvent("calciteListOrderChange");
+
       await dragAndDrop(
         page,
         {
@@ -568,6 +573,8 @@ describe("calcite-list", () => {
       expect(await seventh.getProperty("value")).toBe("c");
       expect(await eight.getProperty("value")).toBe("e");
       expect(await ninth.getProperty("value")).toBe("f");
+
+      //expect(listOrderChangeSpy).toHaveReceivedEventTimes(2);
     });
 
     it("works using a keyboard", async () => {

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

@@ -11,7 +11,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import Sortable, { SortableEvent } from "sortablejs";
+import Sortable from "sortablejs";
 import { debounce } from "lodash-es";
 import { slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
 import {
@@ -27,10 +27,11 @@ import { MAX_COLUMNS } from "../list-item/resources";
 import { getListItemChildren, updateListItemChildren } from "../list-item/utils";
 import { CSS, debounceTimeout, SelectionAppearance, SLOTS } from "./resources";
 import {
-  DragEvent,
+  DragDetail,
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
+  dragActive,
 } from "../../utils/sortableComponent";
 import { SLOTS as STACK_SLOTS } from "../stack/resources";
 
@@ -73,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: (event: DragEvent) => boolean;
+  @Prop() canPull: (detail: DragDetail) => boolean;
 
   /**
    * When provided, the method will be called to determine whether the element can be added from another list.
    */
-  @Prop() canPut: (event: DragEvent) => boolean;
+  @Prop() canPut: (detail: DragDetail) => boolean;
 
   /**
    * When `true`, `calcite-list-item`s are sortable via a draggable button.
@@ -191,12 +192,12 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   /**
    * Emitted when the order of the list has changed.
    */
-  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<DragEvent>;
+  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<DragDetail>;
 
   /**
    * Emitted when the default slot has changes in order to notify parent lists.
    */
-  @Event({ cancelable: false }) calciteInternalListDefaultSlotChange: EventEmitter<DragEvent>;
+  @Event({ cancelable: false }) calciteInternalListDefaultSlotChange: EventEmitter<void>;
 
   @Listen("calciteInternalFocusPreviousItem")
   handleCalciteInternalFocusPreviousItem(event: CustomEvent): void {
@@ -294,14 +295,22 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
+    if (dragActive(this)) {
+      return;
+    }
+
     this.connectObserver();
     this.updateListItems();
     this.setUpSorting();
     connectInteractive(this);
-    this.parentListEl = this.el.parentElement.closest("calcite-list");
+    this.parentListEl = this.el.parentElement?.closest("calcite-list");
   }
 
   disconnectedCallback(): void {
+    if (dragActive(this)) {
+      return;
+    }
+
     this.disconnectObserver();
     disconnectSortableComponent(this);
     disconnectInteractive(this);
@@ -476,16 +485,11 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
     this.connectObserver();
   }
 
-  onDragSort(event: SortableEvent): void {
+  onDragSort(detail: DragDetail): void {
+    this.parentListEl = this.el.parentElement?.closest("calcite-list");
     this.updateListItems();
 
-    const { from, item, to } = event;
-
-    this.calciteListOrderChange.emit({
-      dragEl: item,
-      fromEl: from,
-      toEl: to,
-    });
+    this.calciteListOrderChange.emit(detail);
   }
 
   private handleDefaultSlotChange = (event: Event): void => {

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

@@ -11,10 +11,11 @@ import { HandleNudge } from "../handle/interfaces";
 import { Layout } from "../interfaces";
 import { CSS } from "./resources";
 import {
-  DragEvent,
+  DragDetail,
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
+  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 
@@ -36,12 +37,12 @@ export class SortableList implements InteractiveComponent, SortableComponent {
   /**
    * When provided, the method will be called to determine whether the element can  move from the list.
    */
-  @Prop() canPull: (event: DragEvent) => boolean;
+  @Prop() canPull: (detail: DragDetail) => boolean;
 
   /**
    * When provided, the method will be called to determine whether the element can be added from another list.
    */
-  @Prop() canPut: (event: DragEvent) => boolean;
+  @Prop() canPut: (detail: DragDetail) => boolean;
 
   /**
    * Specifies which items inside the element should be draggable.
@@ -100,12 +101,20 @@ export class SortableList implements InteractiveComponent, SortableComponent {
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
+    if (dragActive(this)) {
+      return;
+    }
+
     this.setUpSorting();
     this.beginObserving();
     connectInteractive(this);
   }
 
   disconnectedCallback(): void {
+    if (dragActive(this)) {
+      return;
+    }
+
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     this.endObserving();

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

@@ -62,10 +62,11 @@ import { ValueListMessages } from "./assets/value-list/t9n";
 import { CSS, ICON_TYPES } from "./resources";
 import { getHandleAndItemElement, getScreenReaderText } from "./utils";
 import {
-  DragEvent,
+  DragDetail,
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
+  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 
@@ -103,12 +104,12 @@ export class ValueList<
   /**
    * When provided, the method will be called to determine whether the element can  move from the list.
    */
-  @Prop() canPull: (event: DragEvent) => boolean;
+  @Prop() canPull: (detail: DragDetail) => boolean;
 
   /**
    * When provided, the method will be called to determine whether the element can be added from another list.
    */
-  @Prop() canPut: (event: DragEvent) => boolean;
+  @Prop() canPut: (detail: DragDetail) => boolean;
 
   /**
    * When `true`, `calcite-value-list-item`s are sortable via a draggable button.
@@ -238,6 +239,10 @@ export class ValueList<
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
+    if (dragActive(this)) {
+      return;
+    }
+
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -261,6 +266,10 @@ export class ValueList<
   }
 
   disconnectedCallback(): void {
+    if (dragActive(this)) {
+      return;
+    }
+
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);

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

@@ -1,9 +1,7 @@
 import Sortable from "sortablejs";
-import { containsCrossShadowBoundary } from "./dom";
 const sortableComponentSet = new Set<SortableComponent>();
-const inactiveSortableComponentSet = new WeakSet<SortableComponent>();
 
-export interface DragEvent {
+export interface DragDetail {
   toEl: HTMLElement;
   fromEl: HTMLElement;
   dragEl: HTMLElement;
@@ -46,27 +44,27 @@ export interface SortableComponent {
   /**
    * Whether the element can move from the list.
    */
-  canPull: (event: DragEvent) => boolean;
+  canPull: (detail: DragDetail) => boolean;
 
   /**
    * Whether the element can be added from another list.
    */
-  canPut: (event: DragEvent) => boolean;
+  canPut: (detail: DragDetail) => boolean;
 
   /**
    * Called by any change to the list (add / update / remove).
    */
-  onDragSort: (event: Sortable.SortableEvent) => void;
+  onDragSort: (detail: DragDetail) => 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,16 +94,17 @@ 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);
+      const { from, item, to } = event;
+      component.onDragSort({ fromEl: from, dragEl: item, toEl: to });
     },
   });
 }
@@ -122,34 +117,26 @@ 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.
+ * @param component The sortable component.
+ * @returns {boolean} a boolean value.
  */
-function onSortingStart(activeComponent: SortableComponent): void {
-  getNestedSortableComponents(activeComponent).forEach((component) => inactiveSortableComponentSet.add(component));
+export function dragActive(component: SortableComponent): boolean {
+  return component.dragEnabled && 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());
 }