@headless-tree/core 1.6.1 → 1.6.3

package/src/features/drag-and-drop/feature.ts

@@ -57,6 +57,7 @@ export const dragAndDropFeature: FeatureImplementation = {
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
     openOnDropDelay: 800,
+    draggedItemOverwritesSelection: true,
     ...defaultConfig,
   }),
 
@@ -178,47 +179,10 @@ export const dragAndDropFeature: FeatureImplementation = {
   itemInstance: {
     getProps: ({ tree, item, prev }) => ({
       ...prev?.(),
-
-      draggable: true,
+      ...(tree.getConfig().seperateDragHandle ? {} : item.getDragHandleProps()),
 
       onDragEnter: (e: DragEvent) => e.preventDefault(),
 
-      onDragStart: (e: DragEvent) => {
-        const selectedItems = tree.getSelectedItems
-          ? tree.getSelectedItems()
-          : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
-        const config = tree.getConfig();
-
-        if (!selectedItems.includes(item)) {
-          tree.setSelectedItems?.([item.getItemMeta().itemId]);
-        }
-
-        if (!(config.canDrag?.(items) ?? true)) {
-          e.preventDefault();
-          return;
-        }
-
-        if (config.setDragImage) {
-          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
-          e.dataTransfer?.setDragImage(imgElement, xOffset ?? 0, yOffset ?? 0);
-        }
-
-        if (config.createForeignDragObject && e.dataTransfer) {
-          const { format, data, dropEffect, effectAllowed } =
-            config.createForeignDragObject(items);
-          e.dataTransfer.setData(format, data);
-
-          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
-          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
-        }
-
-        tree.applySubStateUpdate("dnd", {
-          draggedItems: items,
-          draggingOverItem: tree.getFocusedItem(),
-        });
-      },
-
       onDragOver: (e: DragEvent) => {
         e.stopPropagation(); // don't bubble up to container dragover
         const dataRef = tree.getDataRef<DndDataRef>();
@@ -236,7 +200,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
         handleAutoOpenFolder(dataRef, tree, item, placement);
 
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, false);
 
         if (
           !tree.getState().dnd?.draggedItems &&
@@ -249,7 +213,8 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
 
-        if (!canDrop(e.dataTransfer, target, tree)) {
+        // dataTransfer.payload is not accessible in onDragOver, so just skip entirely here. It'll be checked again in onDrop
+        if (!canDrop(null, target, tree)) {
           dataRef.current.lastAllowDrop = false;
           return;
         }
@@ -276,31 +241,10 @@ export const dragAndDropFeature: FeatureImplementation = {
         }, 100);
       },
 
-      onDragEnd: (e: DragEvent) => {
-        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
-          tree.getConfig();
-        const draggedItems = tree.getState().dnd?.draggedItems;
-
-        if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
-          return;
-        }
-
-        const target = getDragTarget(e, item, tree);
-        if (
-          canDragForeignDragObjectOver &&
-          e.dataTransfer &&
-          !canDragForeignDragObjectOver(e.dataTransfer, target)
-        ) {
-          return;
-        }
-
-        onCompleteForeignDrop?.(draggedItems);
-      },
-
       onDrop: async (e: DragEvent) => {
         e.stopPropagation();
         const dataRef = tree.getDataRef<DndDataRef>();
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, true);
         const draggedItems = tree.getState().dnd?.draggedItems;
         const isValidDrop = canDrop(e.dataTransfer, target, tree);
 
@@ -321,9 +265,79 @@ export const dragAndDropFeature: FeatureImplementation = {
 
         if (draggedItems) {
           await config.onDrop?.(draggedItems, target);
+          draggedItems[0].setFocused();
         } else if (e.dataTransfer) {
           await config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
+
+        tree.applySubStateUpdate("dnd", null);
+        tree.updateDomFocus();
+      },
+    }),
+
+    getDragHandleProps: ({ tree, item, prev }) => ({
+      ...prev?.(),
+
+      draggable: true,
+
+      onDragStart: (e: DragEvent) => {
+        const { draggedItemOverwritesSelection } = tree.getConfig();
+        const selectedItems = tree.getSelectedItems
+          ? tree.getSelectedItems()
+          : [tree.getFocusedItem()];
+        const overwriteSelection =
+          !selectedItems.includes(item) && draggedItemOverwritesSelection;
+        const items = overwriteSelection ? [item] : selectedItems;
+        const config = tree.getConfig();
+
+        if (overwriteSelection) {
+          tree.setSelectedItems?.([item.getItemMeta().itemId]);
+        }
+
+        if (!(config.canDrag?.(items) ?? true)) {
+          e.preventDefault();
+          return;
+        }
+
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          e.dataTransfer?.setDragImage(imgElement, xOffset ?? 0, yOffset ?? 0);
+        }
+
+        if (config.createForeignDragObject && e.dataTransfer) {
+          const { format, data, dropEffect, effectAllowed } =
+            config.createForeignDragObject(items);
+          e.dataTransfer.setData(format, data);
+
+          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
+          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
+        }
+
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem(),
+        });
+      },
+
+      onDragEnd: (e: DragEvent) => {
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
+          tree.getConfig();
+        const draggedItems = tree.getState().dnd?.draggedItems;
+
+        if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
+          return;
+        }
+
+        const target = getDragTarget(e, item, tree, false);
+        if (
+          canDragForeignDragObjectOver &&
+          e.dataTransfer &&
+          !canDragForeignDragObjectOver(e.dataTransfer, target)
+        ) {
+          return;
+        }
+
+        onCompleteForeignDrop?.(draggedItems);
       },
     }),
 

package/src/features/drag-and-drop/types.ts

@@ -97,6 +97,13 @@ export type DragAndDropFeatureDef<T> = {
 
     /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
     openOnDropDelay?: number;
+
+    /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
+    seperateDragHandle?: boolean;
+
+    /** If true, the item that is dragged is not selected, the selected items will be overwritten to just the dragged item.
+     * Defaults to true */
+    draggedItemOverwritesSelection?: boolean;
   };
   treeInstance: {
     getDragTarget: () => DragTarget<T> | null;
@@ -118,6 +125,10 @@ export type DragAndDropFeatureDef<T> = {
     isDragTargetAbove: () => boolean;
     isDragTargetBelow: () => boolean;
     isDraggingOver: () => boolean;
+
+    /** Note that `item.getProps()` already passes in all drag event handlers by default. Set `seperateDragHandle` to true to
+     * disable the default behavior and use this on the handler element instead. */
+    getDragHandleProps: () => Record<string, any>;
   };
   hotkeys: never;
 };

package/src/features/drag-and-drop/utils.ts

@@ -29,6 +29,8 @@ export type TargetPlacement =
 export const isOrderedDragTarget = <T>(dragTarget: DragTarget<T>) =>
   "childIndex" in dragTarget;
 
+/** @param dataTransfer - If the data transfer object should not be considered, e.g. because the event is
+ * onDragOver where the browser does not allow reading the payload, pass null */
 export const canDrop = (
   dataTransfer: DataTransfer | null,
   target: DragTarget<any>,
@@ -197,21 +199,25 @@ export const getReparentTarget = <T>(
   };
 };
 
+/** @param hasDataTransferPayload - If the data transfer object should not be considered, e.g. because the event is
+ * onDragOver where the browser does not allow reading the payload, pass false */
 export const getDragTarget = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
+  hasDataTransferPayload: boolean,
   canReorder = tree.getConfig().canReorder,
 ): DragTarget<any> => {
+  const dataTransfer = hasDataTransferPayload ? e.dataTransfer : null;
   const draggedItems = tree.getState().dnd?.draggedItems;
   const itemMeta = item.getItemMeta();
   const parent = item.getParent();
   const itemTarget: DragTarget<any> = { item };
   const parentTarget: DragTarget<any> | null = parent ? { item: parent } : null;
   const canBecomeSibling =
-    parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
+    parentTarget && canDrop(dataTransfer, parentTarget, tree);
 
-  const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
+  const canMakeChild = canDrop(dataTransfer, itemTarget, tree);
   const placement = getTargetPlacement(e, item, tree, canMakeChild);
 
   if (
@@ -229,7 +235,7 @@ export const getDragTarget = (
 
   if (!canReorder && parent && !canBecomeSibling) {
     // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DragTargetStrategy[] ?
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
 
   if (!parent) {
@@ -242,7 +248,7 @@ export const getDragTarget = (
   }
 
   if (!canBecomeSibling) {
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
 
   if (placement.type === PlacementType.Reparent) {

package/src/features/hotkeys-core/feature.ts

@@ -5,6 +5,11 @@ import {
 } from "../../types/core";
 import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 
+// e.code may be empty or "Unidentified" on mobile virtual keyboards
+// or during IME composition, so we fall back to e.key
+const resolveKeyCode = (e: KeyboardEvent): string =>
+  e.code !== "" && e.code !== "Unidentified" ? e.code : e.key;
+
 const specialKeys: Record<string, RegExp> = {
   // TODO:breaking deprecate auto-lowercase
   letter: /^Key[A-Z]$/,
@@ -71,9 +76,11 @@ export const hotkeysCoreFeature: FeatureImplementation = {
         return;
       }
 
+      const resolvedCode = resolveKeyCode(e);
+
       data.current.pressedKeys ??= new Set();
-      const newMatch = !data.current.pressedKeys.has(e.code);
-      data.current.pressedKeys.add(e.code);
+      const newMatch = !data.current.pressedKeys.has(resolvedCode);
+      data.current.pressedKeys.add(resolvedCode);
 
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
@@ -85,7 +92,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       if (e.target instanceof HTMLInputElement) {
         // JS respects composite keydowns while input elements are focused, and
         // doesnt send the associated keyup events with the same key name
-        data.current.pressedKeys.delete(e.code);
+        data.current.pressedKeys.delete(resolvedCode);
       }
 
       if (!hotkeyName) return;
@@ -110,7 +117,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
 
     const keyup = (e: KeyboardEvent) => {
       data.current.pressedKeys ??= new Set();
-      data.current.pressedKeys.delete(e.code);
+      data.current.pressedKeys.delete(resolveKeyCode(e));
     };
 
     const reset = () => {

package/src/features/keyboard-drag-and-drop/feature.ts

@@ -254,6 +254,7 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
           await config.onDropForeignDragObject?.(dataTransfer, target);
         }
 
+        tree.updateDomFocus();
         tree.applySubStateUpdate(
           "assistiveDndState",
           AssistiveDndState.Completed,

package/src/features/prop-memoization/feature.ts

@@ -59,6 +59,14 @@ export const propMemoizationFeature: FeatureImplementation = {
       return memoize(props, dataRef.current.memo.item);
     },
 
+    getDragHandleProps: ({ item, prev }) => {
+      const dataRef = item.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.drag ??= {};
+      return memoize(props, dataRef.current.memo.drag);
+    },
+
     getRenameInputProps: ({ item, prev }) => {
       const dataRef = item.getDataRef<PropMemoizationDataRef>();
       const props = prev?.() ?? {};

package/src/features/prop-memoization/types.ts

@@ -2,6 +2,7 @@ export interface PropMemoizationDataRef {
   memo?: {
     tree?: Record<string, any>;
     item?: Record<string, any>;
+    drag?: Record<string, any>;
     search?: Record<string, any>;
     rename?: Record<string, any>;
   };

package/src/features/tree/feature.ts

@@ -107,9 +107,13 @@ export const treeFeature: FeatureImplementation<any> = {
       setTimeout(async () => {
         const focusedItem = tree.getFocusedItem();
         tree.getConfig().scrollToItem?.(focusedItem);
-        await poll(() => focusedItem.getElement() !== null, 20);
+        await poll(() => focusedItem.getElement() !== null, 20, 500);
         const focusedElement = focusedItem.getElement();
-        if (!focusedElement) return;
+        if (!focusedElement) {
+          tree.getItems()[0]?.setFocused();
+          tree.getItems()[0]?.getElement()?.focus();
+          return;
+        }
         focusedElement.focus();
       });
     },

package/src/utils.ts

@@ -64,5 +64,6 @@ export const poll = (fn: () => boolean, interval = 100, timeout = 1000) =>
     }, interval);
     clear = setTimeout(() => {
       clearInterval(i);
+      resolve();
     }, timeout);
   });