fix: handle drop events on empty tree

Author: lukasbach

.changeset/metal-ears-design.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/core": patch
+---
+
+fixed an issue where dropping items on an empty tree didn't trigger any events

examples/basic/src/style.css

@@ -7,6 +7,7 @@ body {
 
 .tree {
     max-width: 300px;
+    min-height: 100px;
 }
 
 .tree button[role="treeitem"] {

examples/comprehensive/src/style.css

@@ -7,6 +7,7 @@ body {
 
 .tree {
     max-width: 300px;
+    min-height: 100px;
 }
 
 .tree button[role="treeitem"] {

examples/nextjs/src/style.css

@@ -7,6 +7,7 @@ body {
 
 .tree {
     max-width: 300px;
+    min-height: 100px;
 }
 
 .tree button[role="treeitem"] {

examples/react-compiler/src/style.css

@@ -7,6 +7,7 @@ body {
 
 .tree {
     max-width: 300px;
+    min-height: 100px;
 }
 
 .tree button[role="treeitem"] {

packages/core/src/features/drag-and-drop/feature.ts

@@ -1,5 +1,5 @@
 import { FeatureImplementation } from "../../types/core";
-import { DndDataRef, DragLineData } from "./types";
+import { DndDataRef, DragLineData, DragTarget } from "./types";
 import {
   canDrop,
   getDragCode,
@@ -83,10 +83,38 @@ export const dragAndDropFeature: FeatureImplementation = {
         : { display: "none" };
     },
 
-    getContainerProps: ({ prev }, treeLabel) => {
+    getContainerProps: ({ prev, tree }, treeLabel) => {
       const prevProps = prev?.(treeLabel);
       return {
         ...prevProps,
+
+        onDragOver: (e: DragEvent) => {
+          e.preventDefault();
+        },
+
+        onDrop: async (e: DragEvent) => {
+          // TODO merge implementation with itemInstance.onDrop
+          const dataRef = tree.getDataRef<DndDataRef>();
+          const target: DragTarget<any> = { item: tree.getRootItem() };
+
+          if (!canDrop(e.dataTransfer, target, tree)) {
+            return;
+          }
+
+          e.preventDefault();
+          const config = tree.getConfig();
+          const draggedItems = tree.getState().dnd?.draggedItems;
+
+          dataRef.current.lastDragCode = undefined;
+          tree.applySubStateUpdate("dnd", null);
+
+          if (draggedItems) {
+            await config.onDrop?.(draggedItems, target);
+          } else if (e.dataTransfer) {
+            await config.onDropForeignDragObject?.(e.dataTransfer, target);
+          }
+        },
+
         style: {
           ...prevProps?.style,
           position: "relative",
@@ -193,6 +221,7 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
 
       onDrop: async (e: DragEvent) => {
+        e.stopPropagation();
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDragTarget(e, item, tree);
 

packages/core/src/features/tree/feature.ts

@@ -82,6 +82,11 @@ export const treeFeature: FeatureImplementation<any> = {
       );
     },
 
+    getRootItem: ({ tree }) => {
+      const { rootItemId } = tree.getConfig();
+      return tree.getItemInstance(rootItemId);
+    },
+
     focusNextItem: ({ tree }) => {
       const focused = tree.getFocusedItem().getItemMeta();
       if (!focused) return;

packages/core/src/features/tree/types.ts

@@ -33,7 +33,8 @@ export type TreeFeatureDef<T> = {
     /** @internal */
     getItemsMeta: () => ItemMeta[];
 
-    getFocusedItem: () => ItemInstance<any>;
+    getFocusedItem: () => ItemInstance<T>;
+    getRootItem: () => ItemInstance<T>;
     focusNextItem: () => void;
     focusPreviousItem: () => void;
     updateDomFocus: () => void;

packages/docs/docs/2-features/10-checkboxes.mdx

@@ -14,15 +14,18 @@ import { FeaturePageHeader } from "../../src/components/docs-page/feature-page-h
     feature="checkboxes"
 />
 
-<DemoBox tags={["feature/checkbox"]} initialStory="react-checkboxes-general--general" />
-
-:::warning
+:::danger
 
-The checkboxes feature was not released on the `latest` channel yet. You can try it out in a snapshot
-version with `npm i @headless-tree/core@snapshot` or `npm i @headless-tree/react@snapshot`.
+The checkboxes feature is still in development and considered Alpha. Its interface may change with breaking
+changes between patch version releases without additional notices. You can get notified of the proper
+release of the checkboxes feature on [Bluesky](https://bsky.app/profile/lukasbach.bsky.social) or
+[Discord](https://discord.gg/KuZ6EezzVw).
 
 :::
 
+<DemoBox tags={["feature/checkbox"]} initialStory="react-checkboxes-general--general" />
+
+
 The checkboxes feature allows users to multi-select items in a more permanent way than the normal
 selection feature, and visualize that state with checkboxes.
 

packages/docs/docs/3-dnd/1-overview.mdx

@@ -70,6 +70,13 @@ const tree = useTree<Item>({
 });
 ```
 
+:::tip
+
+Add a minimum height to your tree container (the component receiving `tree.getProps()`) to make sure
+that users can drop items there even if the tree is empty.
+
+:::
+
 ## The Drop Event
 
 When the user drops tree items onto a target within the tree, the [`onDrop`](/api/core/interface/DragAndDropFeatureConfig#onDrop) event is called