feat(list)!: Support keyboard dragging between different Lists

packages/calcite-components/src/components/action/action.scss

@@ -18,7 +18,7 @@
 
 :host {
   @extend %component-host;
-  @apply flex bg-transparent;
+  @apply flex bg-transparent cursor-pointer;
 }
 
 :host,
@@ -62,7 +62,6 @@ button {
     m-0
     flex
     w-auto
-    cursor-pointer
     items-center
     justify-start
     border-none
@@ -73,6 +72,7 @@ button {
   color: var(--calcite-action-text-color, var(--calcite-color-text-3));
   text-align: unset;
   flex: 1 0 auto;
+  cursor: inherit;
 
   &:hover,
   &:focus {

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

@@ -107,15 +107,15 @@ describe("calcite-list-item", () => {
     await page.setContent(`<calcite-list-item></calcite-list-item>`);
     await page.waitForChanges();
 
-    let handleNode = await page.find("calcite-list-item >>> calcite-handle");
+    let handleNode = await page.find("calcite-list-item >>> calcite-sort-handle");
 
     expect(handleNode).toBeNull();
 
     const item = await page.find("calcite-list-item");
     item.setProperty("dragHandle", true);
     await page.waitForChanges();
 
-    handleNode = await page.find("calcite-list-item >>> calcite-handle");
+    handleNode = await page.find("calcite-list-item >>> calcite-sort-handle");
 
     expect(handleNode).not.toBeNull();
   });
@@ -343,29 +343,4 @@ describe("calcite-list-item", () => {
     expect(await listItem.getProperty("open")).toBe(false);
     expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
   });
-
-  it("should fire calciteListItemDragHandleChange event when drag handle is clicked", async () => {
-    const page = await newE2EPage({
-      html: html`<calcite-list-item drag-handle></calcite-list-item>`,
-    });
-
-    const listItem = await page.find("calcite-list-item");
-    const calciteListItemDragHandleChange = await page.spyOnEvent("calciteListItemDragHandleChange", "window");
-
-    expect(await listItem.getProperty("dragSelected")).toBe(false);
-
-    const dragHandle = await page.find(`calcite-list-item >>> calcite-handle`);
-    await dragHandle.callMethod("setFocus");
-    await page.waitForChanges();
-
-    await dragHandle.press("Space");
-    await page.waitForChanges();
-    expect(await listItem.getProperty("dragSelected")).toBe(true);
-    expect(calciteListItemDragHandleChange).toHaveReceivedEventTimes(1);
-
-    await dragHandle.press("Space");
-    await page.waitForChanges();
-    expect(await listItem.getProperty("dragSelected")).toBe(false);
-    expect(calciteListItemDragHandleChange).toHaveReceivedEventTimes(2);
-  });
 });

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

@@ -193,7 +193,7 @@ td:focus {
   @apply flex items-center;
 
   calcite-action,
-  calcite-handle {
+  calcite-sort-handle {
     @apply self-stretch;
   }
 }
@@ -208,7 +208,7 @@ td:focus {
   @apply p-0 relative;
   ::slotted(calcite-action),
   ::slotted(calcite-action-menu),
-  ::slotted(calcite-handle),
+  ::slotted(calcite-sort-handle),
   ::slotted(calcite-dropdown) {
     @apply self-stretch;
 
@@ -223,7 +223,7 @@ tr:focus {
     .close,
     ::slotted(calcite-action),
     ::slotted(calcite-action-menu),
-    ::slotted(calcite-handle),
+    ::slotted(calcite-sort-handle),
     ::slotted(calcite-dropdown) {
       block-size: calc(100% - theme("spacing[1]"));
     }

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

@@ -40,13 +40,9 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { SortableComponentItem } from "../../utils/sortableComponent";
+import { MoveTo } from "../sort-handle/interfaces";
 import { ListItemMessages } from "./assets/list-item/t9n";
-import {
-  getDepth,
-  getListItemChildren,
-  getListItemChildLists,
-  updateListItemChildren,
-} from "./utils";
+import { getDepth, hasListItemChildren } from "./utils";
 import { CSS, activeCellTestAttribute, ICONS, SLOTS } from "./resources";
 
 const focusMap = new Map<HTMLCalciteListElement, number>();
@@ -142,8 +138,10 @@ export class ListItem
 
   /**
    * When `true`, the component's drag handle is selected.
+   *
+   * @deprecated no longer necessary.
    */
-  @Prop({ mutable: true, reflect: true }) dragSelected = false;
+  @Prop({ reflect: true }) dragSelected = false;
 
   /**
    * Hides the component when filtered.
@@ -162,6 +160,13 @@ export class ListItem
    */
   @Prop() metadata: Record<string, unknown>;
 
+  /**
+   * Sets the item to display a border.
+   *
+   * @internal
+   */
+  @Prop() moveToItems: MoveTo[] = [];
+
   /**
    * When `true`, the item is open to show child components.
    */
@@ -173,14 +178,14 @@ export class ListItem
   }
 
   /**
-   * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
+   * Used to determine what menu options are available in the sort-handle
    *
    * @internal
    */
   @Prop() setSize: number = null;
 
   /**
-   * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility.
+   * Used to determine what menu options are available in the sort-handle
    *
    * @internal
    */
@@ -223,6 +228,13 @@ export class ListItem
    */
   @Prop({ mutable: true }) selectionAppearance: SelectionAppearance = null;
 
+  /**
+   * When `true`, displays and positions the sort handle.
+   *
+   * @internal
+   */
+  @Prop({ mutable: true }) sortHandleOpen = false;
+
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -260,6 +272,8 @@ export class ListItem
 
   /**
    * Fires when the drag handle is selected.
+   *
+   * @deprecated no longer necessary.
    */
   @Event({ cancelable: false }) calciteListItemDragHandleChange: EventEmitter<void>;
 
@@ -460,7 +474,8 @@ export class ListItem
   }
 
   renderDragHandle(): VNode {
-    const { label, dragHandle, dragSelected, dragDisabled, setPosition, setSize } = this;
+    const { label, dragHandle, dragDisabled, setPosition, setSize, sortHandleOpen, moveToItems } =
+      this;
 
     return dragHandle ? (
       <td
@@ -471,11 +486,16 @@ export class ListItem
         ref={(el) => (this.handleGridEl = el)}
         role="gridcell"
       >
-        <calcite-handle
+        <calcite-sort-handle
           disabled={dragDisabled}
           label={label}
-          onCalciteHandleChange={this.dragHandleSelectedChangeHandler}
-          selected={dragSelected}
+          moveToItems={moveToItems}
+          onCalciteSortHandleBeforeClose={this.handleSortHandleBeforeClose}
+          onCalciteSortHandleBeforeOpen={this.handleSortHandleBeforeOpen}
+          onCalciteSortHandleClose={this.handleSortHandleClose}
+          onCalciteSortHandleOpen={this.handleSortHandleOpen}
+          open={sortHandleOpen}
+          overlayPositioning="fixed"
           setPosition={setPosition}
           setSize={setSize}
         />
@@ -652,8 +672,6 @@ export class ListItem
       openable,
       open,
       level,
-      setPosition,
-      setSize,
       active,
       label,
       selected,
@@ -677,9 +695,7 @@ export class ListItem
               aria-expanded={openable ? toAriaBoolean(open) : null}
               aria-label={label}
               aria-level={level}
-              aria-posinset={setPosition}
               aria-selected={toAriaBoolean(selected)}
-              aria-setsize={setSize}
               class={{
                 [CSS.container]: true,
                 [CSS.containerHover]: true,
@@ -716,10 +732,22 @@ export class ListItem
   //
   // --------------------------------------------------------------------------
 
-  private dragHandleSelectedChangeHandler = (event: CustomEvent<void>): void => {
-    this.dragSelected = (event.target as HTMLCalciteHandleElement).selected;
-    this.calciteListItemDragHandleChange.emit();
+  private handleSortHandleBeforeOpen = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
+  };
+
+  private handleSortHandleBeforeClose = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
+  };
+
+  private handleSortHandleClose = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
+    this.sortHandleOpen = false;
+  };
+
+  private handleSortHandleOpen = (event: CustomEvent<void>): void => {
     event.stopPropagation();
+    this.sortHandleOpen = true;
   };
 
   private emitInternalListItemActive = (): void => {
@@ -800,11 +828,7 @@ export class ListItem
       return;
     }
 
-    const listItemChildren = getListItemChildren(slotEl);
-    const listItemChildLists = getListItemChildLists(slotEl);
-    updateListItemChildren(listItemChildren);
-
-    this.openable = !!listItemChildren.length || !!listItemChildLists.length;
+    this.openable = hasListItemChildren(slotEl);
   }
 
   private handleDefaultSlotChange = (event: Event): void => {

packages/calcite-components/src/components/list-item/utils.ts

@@ -4,33 +4,28 @@ const listSelector = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector = "calcite-list-item";
 
-export function getListItemChildLists(slotEl: HTMLSlotElement): HTMLCalciteListElement[] {
-  return Array.from(
-    slotEl.assignedElements({ flatten: true }).filter((el): el is HTMLCalciteListElement => el.matches(listSelector)),
-  );
-}
-
-export function getListItemChildren(slotEl: HTMLSlotElement): HTMLCalciteListItemElement[] {
+export function hasListItemChildren(slotEl: HTMLSlotElement): boolean {
   const assignedElements = slotEl.assignedElements({ flatten: true });
 
-  const listItemGroupChildren = assignedElements
+  const groupChildren = assignedElements
     .filter((el): el is HTMLCalciteListItemGroupElement => el?.matches(listItemGroupSelector))
-    .map((group) => Array.from(group.querySelectorAll(listItemSelector)))
-    .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
+    .map((group) => Array.from(group.querySelectorAll<HTMLCalciteListItemElement>(listItemSelector)))
+    .flat();
 
   const listItemChildren = assignedElements.filter((el): el is HTMLCalciteListItemElement =>
     el?.matches(listItemSelector),
   );
 
-  const listItemListChildren = assignedElements
-    .filter((el): el is HTMLCalciteListElement => el?.matches(listSelector))
-    .map((list) => Array.from(list.querySelectorAll(listItemSelector)))
-    .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
+  const listChildren = assignedElements.filter((el): el is HTMLCalciteListElement => el?.matches(listSelector));
 
-  return [...listItemListChildren, ...listItemGroupChildren, ...listItemChildren];
+  return [...listChildren, ...groupChildren, ...listItemChildren].length > 0;
 }
 
-export function updateListItemChildren(listItemChildren: HTMLCalciteListItemElement[]): void {
+export function updateListItemChildren(slotEl: HTMLSlotElement): void {
+  const listItemChildren = slotEl
+    .assignedElements({ flatten: true })
+    .filter((el): el is HTMLCalciteListItemElement => el?.matches(listItemSelector));
+
   listItemChildren.forEach((listItem) => {
     listItem.setPosition = listItemChildren.indexOf(listItem) + 1;
     listItem.setSize = listItemChildren.length;