chore: review fixes

Author: driskull

packages/components/src/components/list/list.scss

@@ -52,7 +52,7 @@
   }
 }
 
-.table-container--drop-zone {
+.table-container--drag-enabled-empty {
   @apply box-border
       border
       border-dashed

packages/components/src/components/list/list.stories.ts

@@ -10,7 +10,8 @@ import { List } from "./list";
 const { selectionMode, interactionMode, selectionAppearance, scale } = ATTRIBUTES;
 
 interface ListStoryArgs
-  extends Pick<
+  extends
+    Pick<
       List,
       | "disabled"
       | "displayMode"
@@ -6533,7 +6534,7 @@ export const emptyFixedHeight = (): string =>
 export const emptyStateDropTarget = (): string =>
   html`<h1>Empty List</h1>
     <calcite-list group="items" drag-enabled label="Park features">
-      <div slot="drag-empty">
+      <div slot="drag-enabled-empty">
         <h2>Start configuring a form for the layer</h2>
         <p>Drag items here to add them to the form.</p>
       </div>

packages/components/src/components/list/list.tsx

@@ -3,7 +3,7 @@ import Sortable from "sortablejs";
 import { debounce } from "es-toolkit";
 import { PropertyValues } from "lit";
 import { createEvent, h, JsxNode, LitElement, method, property, state } from "@arcgis/lumina";
-import { getRootNode, slotChangeHasAssignedElement } from "../../utils/dom";
+import { getRootNode, slotChangeHasAssignedElement, slotChangeHasContent } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 import { InteractionMode, Scale, SelectionMode } from "../interfaces";
 import { ItemData } from "../list-item/interfaces";
@@ -122,7 +122,7 @@ export class List extends LitElement implements SortableComponent {
   }
 
   get showEmptyDragContainer(): boolean {
-    return this.dragEnabled && !this.visibleItems.length;
+    return this.dragEnabled && !this.hasContent;
   }
 
   get showNoResultsContainer(): boolean {
@@ -161,6 +161,8 @@ export class List extends LitElement implements SortableComponent {
 
   @state() sortHandleMenuItems: SortMenuItem[] = [];
 
+  @state() hasContent = false;
+
   //#endregion
 
   //#region Public Properties
@@ -729,10 +731,11 @@ export class List extends LitElement implements SortableComponent {
     this.parentListEl = this.el.parentElement?.closest(listSelector);
   }
 
-  private handleDefaultSlotChange(): void {
+  private handleDefaultSlotChange(event: Event): void {
     if (this.parentListEl) {
       this.calciteInternalListDefaultSlotChange.emit();
     }
+    this.hasContent = slotChangeHasContent(event);
   }
 
   private setListItemGroups(): void {
@@ -1257,11 +1260,11 @@ export class List extends LitElement implements SortableComponent {
             <div
               class={{
                 [CSS.tableContainer]: true,
-                [CSS.tableContainerDropZone]: this.showEmptyDragContainer,
+                [CSS.tableContainerDragEnabledEmpty]: this.showEmptyDragContainer,
               }}
               role="rowgroup"
             >
-              <slot hidden={!this.showEmptyDragContainer} name={SLOTS.dragEmpty} />
+              <slot hidden={!this.showEmptyDragContainer} name={SLOTS.dragEnabledEmpty} />
               <slot onSlotChange={this.handleDefaultSlotChange} ref={this.setDefaultSlotEl} />
             </div>
           </div>

packages/components/src/components/list/resources.ts

@@ -4,7 +4,7 @@ export const CSS = {
   scrim: "scrim",
   stack: "stack",
   tableContainer: "table-container",
-  tableContainerDropZone: "table-container--drop-zone",
+  tableContainerDragEnabledEmpty: "table-container--drag-enabled-empty",
   sticky: "sticky-pos",
   assistiveText: "assistive-text",
   containerHeight: "container-height",
@@ -13,7 +13,7 @@ export const CSS = {
 export type SelectionAppearance = "border" | "highlight" | "icon";
 
 export const SLOTS = {
-  dragEmpty: "drag-empty",
+  dragEnabledEmpty: "drag-enabled-empty",
   filterNoResults: "filter-no-results",
   filterActionsStart: "filter-actions-start",
   filterActionsEnd: "filter-actions-end",