fix(list): fix mobile device dragging with nested lists (#9573)

**Related Issue:** #9521

## Summary

- Makes sure that `connectSortableComponent` isn't called during an
active drag of a sortable item.
- Previously, mutation observers were calling `connectSortableComponent`
during a drag
- This caused the existing implementation to be destroyed and a new one
created which left the user in a frozen state.
- This only occurred on mobile devices because mobile devices do not use
native drag and drop with Sortable.js
- The fix makes sure that `connectSortableComponent` and
`disconnectSortableComponent` do nothing during an active drag.

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

@@ -30,7 +30,6 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
-  dragActive,
 } from "../../utils/sortableComponent";
 import { SLOTS as STACK_SLOTS } from "../stack/resources";
 import {
@@ -400,10 +399,6 @@ export class List
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     connectLocalized(this);
     connectMessages(this);
     this.connectObserver();
@@ -427,10 +422,6 @@ export class List
   }
 
   disconnectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     this.disconnectObserver();
     disconnectSortableComponent(this);
     disconnectInteractive(this);

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

@@ -15,7 +15,6 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
-  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 import { CSS } from "./resources";
@@ -102,20 +101,12 @@ 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

@@ -63,7 +63,6 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
-  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 import { ValueListMessages } from "./assets/value-list/t9n";
@@ -240,10 +239,6 @@ export class ValueList<
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -267,10 +262,6 @@ export class ValueList<
   }
 
   disconnectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);

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

@@ -105,6 +105,10 @@ export interface SortableComponentItem {
  * @param {SortableComponent} component - The sortable component.
  */
 export function connectSortableComponent(component: SortableComponent): void {
+  if (dragActive(component)) {
+    return;
+  }
+
   disconnectSortableComponent(component);
   sortableComponentSet.add(component);
 
@@ -152,6 +156,10 @@ export function connectSortableComponent(component: SortableComponent): void {
  * @param {SortableComponent} component - The sortable component.
  */
 export function disconnectSortableComponent(component: SortableComponent): void {
+  if (dragActive(component)) {
+    return;
+  }
+
   sortableComponentSet.delete(component);
 
   component.sortable?.destroy();