@headless-tree/core 0.0.0-20250624135912 → 0.0.0-20250630155038

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/lib/cjs/features/drag-and-drop/feature.js +24 -2
  3. package/lib/cjs/features/tree/feature.js +4 -0
  4. package/lib/cjs/features/tree/types.d.ts +2 -1
  5. package/lib/esm/features/drag-and-drop/feature.js +24 -2
  6. package/lib/esm/features/tree/feature.js +4 -0
  7. package/lib/esm/features/tree/types.d.ts +2 -1
  8. package/package.json +1 -1
  9. package/src/features/drag-and-drop/feature.ts +31 -2
  10. package/src/features/tree/feature.ts +5 -0
  11. package/src/features/tree/types.ts +2 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @headless-tree/core
2
2
 
3
- ## 0.0.0-20250624135912
3
+ ## 0.0.0-20250630155038
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -8,6 +8,7 @@
8
8
 
9
9
  ### Patch Changes
10
10
 
11
+ - 344011a: fixed an issue where dropping items on an empty tree didn't trigger any events
11
12
  - 9f418f8: support setting the drag preview with the `setDragImage` option (#115)
12
13
  - 309feba: fixed an issue where the drag-forbidden cursor is shown briefly between changing drag targets (#114)
13
14
 
package/lib/cjs/features/drag-and-drop/feature.js CHANGED
@@ -68,9 +68,30 @@ exports.dragAndDropFeature = {
68
68
  }
69
69
  : { display: "none" };
70
70
  },
71
- getContainerProps: ({ prev }, treeLabel) => {
71
+ getContainerProps: ({ prev, tree }, treeLabel) => {
72
72
  const prevProps = prev === null || prev === void 0 ? void 0 : prev(treeLabel);
73
- return Object.assign(Object.assign({}, prevProps), { style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
73
+ return Object.assign(Object.assign({}, prevProps), { onDragOver: (e) => {
74
+ e.preventDefault();
75
+ }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
76
+ var _a, _b, _c;
77
+ // TODO merge implementation with itemInstance.onDrop
78
+ const dataRef = tree.getDataRef();
79
+ const target = { item: tree.getRootItem() };
80
+ if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
81
+ return;
82
+ }
83
+ e.preventDefault();
84
+ const config = tree.getConfig();
85
+ const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
86
+ dataRef.current.lastDragCode = undefined;
87
+ tree.applySubStateUpdate("dnd", null);
88
+ if (draggedItems) {
89
+ yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
90
+ }
91
+ else if (e.dataTransfer) {
92
+ yield ((_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target));
93
+ }
94
+ }), style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
74
95
  },
75
96
  },
76
97
  itemInstance: {
@@ -138,6 +159,7 @@ exports.dragAndDropFeature = {
138
159
  (_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
139
160
  }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
140
161
  var _a, _b, _c;
162
+ e.stopPropagation();
141
163
  const dataRef = tree.getDataRef();
142
164
  const target = (0, utils_1.getDragTarget)(e, item, tree);
143
165
  if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
package/lib/cjs/features/tree/feature.js CHANGED
@@ -59,6 +59,10 @@ exports.treeFeature = {
59
59
  var _a, _b;
60
60
  return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
61
61
  },
62
+ getRootItem: ({ tree }) => {
63
+ const { rootItemId } = tree.getConfig();
64
+ return tree.getItemInstance(rootItemId);
65
+ },
62
66
  focusNextItem: ({ tree }) => {
63
67
  var _a;
64
68
  const focused = tree.getFocusedItem().getItemMeta();
package/lib/cjs/features/tree/types.d.ts CHANGED
@@ -27,7 +27,8 @@ export type TreeFeatureDef<T> = {
27
27
  treeInstance: {
28
28
  /** @internal */
29
29
  getItemsMeta: () => ItemMeta[];
30
- getFocusedItem: () => ItemInstance<any>;
30
+ getFocusedItem: () => ItemInstance<T>;
31
+ getRootItem: () => ItemInstance<T>;
31
32
  focusNextItem: () => void;
32
33
  focusPreviousItem: () => void;
33
34
  updateDomFocus: () => void;
package/lib/esm/features/drag-and-drop/feature.js CHANGED
@@ -65,9 +65,30 @@ export const dragAndDropFeature = {
65
65
  }
66
66
  : { display: "none" };
67
67
  },
68
- getContainerProps: ({ prev }, treeLabel) => {
68
+ getContainerProps: ({ prev, tree }, treeLabel) => {
69
69
  const prevProps = prev === null || prev === void 0 ? void 0 : prev(treeLabel);
70
- return Object.assign(Object.assign({}, prevProps), { style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
70
+ return Object.assign(Object.assign({}, prevProps), { onDragOver: (e) => {
71
+ e.preventDefault();
72
+ }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
73
+ var _a, _b, _c;
74
+ // TODO merge implementation with itemInstance.onDrop
75
+ const dataRef = tree.getDataRef();
76
+ const target = { item: tree.getRootItem() };
77
+ if (!canDrop(e.dataTransfer, target, tree)) {
78
+ return;
79
+ }
80
+ e.preventDefault();
81
+ const config = tree.getConfig();
82
+ const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
83
+ dataRef.current.lastDragCode = undefined;
84
+ tree.applySubStateUpdate("dnd", null);
85
+ if (draggedItems) {
86
+ yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
87
+ }
88
+ else if (e.dataTransfer) {
89
+ yield ((_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target));
90
+ }
91
+ }), style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
71
92
  },
72
93
  },
73
94
  itemInstance: {
@@ -135,6 +156,7 @@ export const dragAndDropFeature = {
135
156
  (_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
136
157
  }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
137
158
  var _a, _b, _c;
159
+ e.stopPropagation();
138
160
  const dataRef = tree.getDataRef();
139
161
  const target = getDragTarget(e, item, tree);
140
162
  if (!canDrop(e.dataTransfer, target, tree)) {
package/lib/esm/features/tree/feature.js CHANGED
@@ -56,6 +56,10 @@ export const treeFeature = {
56
56
  var _a, _b;
57
57
  return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
58
58
  },
59
+ getRootItem: ({ tree }) => {
60
+ const { rootItemId } = tree.getConfig();
61
+ return tree.getItemInstance(rootItemId);
62
+ },
59
63
  focusNextItem: ({ tree }) => {
60
64
  var _a;
61
65
  const focused = tree.getFocusedItem().getItemMeta();
package/lib/esm/features/tree/types.d.ts CHANGED
@@ -27,7 +27,8 @@ export type TreeFeatureDef<T> = {
27
27
  treeInstance: {
28
28
  /** @internal */
29
29
  getItemsMeta: () => ItemMeta[];
30
- getFocusedItem: () => ItemInstance<any>;
30
+ getFocusedItem: () => ItemInstance<T>;
31
+ getRootItem: () => ItemInstance<T>;
31
32
  focusNextItem: () => void;
32
33
  focusPreviousItem: () => void;
33
34
  updateDomFocus: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@headless-tree/core",
3
- "version": "0.0.0-20250624135912",
3
+ "version": "0.0.0-20250630155038",
4
4
  "main": "lib/cjs/index.js",
5
5
  "module": "lib/esm/index.js",
6
6
  "types": "lib/esm/index.d.ts",
package/src/features/drag-and-drop/feature.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FeatureImplementation } from "../../types/core";
2
- import { DndDataRef, DragLineData } from "./types";
2
+ import { DndDataRef, DragLineData, DragTarget } from "./types";
3
3
  import {
4
4
  canDrop,
5
5
  getDragCode,
@@ -83,10 +83,38 @@ export const dragAndDropFeature: FeatureImplementation = {
83
83
  : { display: "none" };
84
84
  },
85
85
 
86
- getContainerProps: ({ prev }, treeLabel) => {
86
+ getContainerProps: ({ prev, tree }, treeLabel) => {
87
87
  const prevProps = prev?.(treeLabel);
88
88
  return {
89
89
  ...prevProps,
90
+
91
+ onDragOver: (e: DragEvent) => {
92
+ e.preventDefault();
93
+ },
94
+
95
+ onDrop: async (e: DragEvent) => {
96
+ // TODO merge implementation with itemInstance.onDrop
97
+ const dataRef = tree.getDataRef<DndDataRef>();
98
+ const target: DragTarget<any> = { item: tree.getRootItem() };
99
+
100
+ if (!canDrop(e.dataTransfer, target, tree)) {
101
+ return;
102
+ }
103
+
104
+ e.preventDefault();
105
+ const config = tree.getConfig();
106
+ const draggedItems = tree.getState().dnd?.draggedItems;
107
+
108
+ dataRef.current.lastDragCode = undefined;
109
+ tree.applySubStateUpdate("dnd", null);
110
+
111
+ if (draggedItems) {
112
+ await config.onDrop?.(draggedItems, target);
113
+ } else if (e.dataTransfer) {
114
+ await config.onDropForeignDragObject?.(e.dataTransfer, target);
115
+ }
116
+ },
117
+
90
118
  style: {
91
119
  ...prevProps?.style,
92
120
  position: "relative",
@@ -193,6 +221,7 @@ export const dragAndDropFeature: FeatureImplementation = {
193
221
  },
194
222
 
195
223
  onDrop: async (e: DragEvent) => {
224
+ e.stopPropagation();
196
225
  const dataRef = tree.getDataRef<DndDataRef>();
197
226
  const target = getDragTarget(e, item, tree);
198
227
 
package/src/features/tree/feature.ts CHANGED
@@ -82,6 +82,11 @@ export const treeFeature: FeatureImplementation<any> = {
82
82
  );
83
83
  },
84
84
 
85
+ getRootItem: ({ tree }) => {
86
+ const { rootItemId } = tree.getConfig();
87
+ return tree.getItemInstance(rootItemId);
88
+ },
89
+
85
90
  focusNextItem: ({ tree }) => {
86
91
  const focused = tree.getFocusedItem().getItemMeta();
87
92
  if (!focused) return;
package/src/features/tree/types.ts CHANGED
@@ -33,7 +33,8 @@ export type TreeFeatureDef<T> = {
33
33
  /** @internal */
34
34
  getItemsMeta: () => ItemMeta[];
35
35
 
36
- getFocusedItem: () => ItemInstance<any>;
36
+ getFocusedItem: () => ItemInstance<T>;
37
+ getRootItem: () => ItemInstance<T>;
37
38
  focusNextItem: () => void;
38
39
  focusPreviousItem: () => void;
39
40
  updateDomFocus: () => void;