@headless-tree/core 1.2.1 → 1.4.0

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

@@ -7,14 +7,14 @@ export enum ItemDropCategory {
   LastInGroup,
 }
 
-enum PlacementType {
+export enum PlacementType {
   ReorderAbove,
   ReorderBelow,
   MakeChild,
   Reparent,
 }
 
-type TargetPlacement =
+export type TargetPlacement =
   | {
       type:
         | PlacementType.ReorderAbove
@@ -95,7 +95,7 @@ export const getInsertionIndex = <T>(
   return childIndex - numberOfDragItemsBeforeTarget;
 };
 
-const getTargetPlacement = (
+export const getTargetPlacement = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
@@ -153,11 +153,9 @@ const getTargetPlacement = (
 };
 
 export const getDragCode = (
-  e: any,
   item: ItemInstance<any>,
-  tree: TreeInstance<any>,
+  placement: TargetPlacement,
 ) => {
-  const placement = getTargetPlacement(e, item, tree, true);
   return [
     item.getId(),
     placement.type,
@@ -222,6 +220,10 @@ export const getDragTarget = (
     canBecomeSibling &&
     placement.type !== PlacementType.MakeChild
   ) {
+    if (draggedItems?.some((item) => item.isDescendentOf(parent.getId()))) {
+      // dropping on itself should be illegal, return item, canDrop will then return false
+      return itemTarget;
+    }
     return parentTarget;
   }
 

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

@@ -191,7 +191,16 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {
-        tree.startKeyboardDrag(tree.getSelectedItems());
+        const selectedItems = tree.getSelectedItems?.() ?? [
+          tree.getFocusedItem(),
+        ];
+        const focusedItem = tree.getFocusedItem();
+
+        tree.startKeyboardDrag(
+          selectedItems.includes(focusedItem)
+            ? selectedItems
+            : selectedItems.concat(focusedItem),
+        );
       },
     },
     dragUp: {

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

@@ -49,6 +49,37 @@ describe("core-feature/keyboard-drag-and-drop", () => {
         tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
       });
 
+      it("starts dragging only focused item", () => {
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          draggedItems: [tree.item("x3")],
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 19,
+            dragLineLevel: 0,
+            insertionIndex: 2,
+            item: tree.item("x"),
+          },
+        });
+      });
+
+      it("starts dragging both selected and focused item", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          draggedItems: [tree.item("x111"), tree.item("x112"), tree.item("x3")],
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 19,
+            dragLineLevel: 0,
+            insertionIndex: 2,
+            item: tree.item("x"),
+          },
+        });
+      });
+
       it("moves down 1", () => {
         tree.do.selectMultiple("x111", "x112");
         tree.do.hotkey("startDrag");
@@ -355,13 +386,13 @@ describe("core-feature/keyboard-drag-and-drop", () => {
 
       it("doesnt go below end of tree", () => {
         const lastState = {
-          draggedItems: [tree.item("x111")],
+          draggedItems: [tree.item("x111"), tree.item("x3")],
           dragTarget: {
             item: tree.item("x"),
             childIndex: 4,
             dragLineIndex: 20,
             dragLineLevel: 0,
-            insertionIndex: 4,
+            insertionIndex: 3,
           },
         };
 
@@ -378,7 +409,7 @@ describe("core-feature/keyboard-drag-and-drop", () => {
 
       it("doesnt go above top of tree", () => {
         const firstState = {
-          draggedItems: [tree.item("x111")],
+          draggedItems: [tree.item("x111"), tree.item("x1")],
           dragTarget: {
             item: tree.item("x"),
             childIndex: 0,

package/src/features/main/types.ts

@@ -36,8 +36,6 @@ export type MainFeatureDef<T = any> = {
       stateName: K,
       updater: Updater<TreeState<T>[K]>,
     ) => void;
-    /** @internal */
-    buildItemInstance: (itemId: string) => ItemInstance<T>;
     setState: SetStateFn<TreeState<T>>;
     getState: () => TreeState<T>;
     setConfig: SetStateFn<TreeConfig<T>>;

package/src/features/sync-data-loader/feature.ts

@@ -2,9 +2,13 @@ import { FeatureImplementation } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
 import { throwError } from "../../utilities/errors";
 
+const undefErrorMessage = "sync dataLoader returned undefined";
 const promiseErrorMessage = "sync dataLoader returned promise";
 const unpromise = <T>(data: T | Promise<T>): T => {
-  if (!data || (typeof data === "object" && "then" in data)) {
+  if (!data) {
+    throw throwError(undefErrorMessage);
+  }
+  if (typeof data === "object" && "then" in data) {
     throw throwError(promiseErrorMessage);
   }
   return data;

package/src/features/tree/feature.ts

@@ -76,8 +76,9 @@ export const treeFeature: FeatureImplementation<any> = {
     },
 
     getFocusedItem: ({ tree }) => {
+      const focusedItemId = tree.getState().focusedItem;
       return (
-        tree.getItemInstance(tree.getState().focusedItem ?? "") ??
+        (focusedItemId !== null ? tree.getItemInstance(focusedItemId) : null) ??
         tree.getItems()[0]
       );
     },
@@ -139,10 +140,10 @@ export const treeFeature: FeatureImplementation<any> = {
         ref: item.registerElement,
         role: "treeitem",
         "aria-setsize": itemMeta.setSize,
-        "aria-posinset": itemMeta.posInSet,
+        "aria-posinset": itemMeta.posInSet + 1,
         "aria-selected": "false",
         "aria-label": item.getItemName(),
-        "aria-level": itemMeta.level,
+        "aria-level": itemMeta.level + 1,
         tabIndex: item.isFocused() ? 0 : -1,
         onClick: (e: MouseEvent) => {
           item.setFocused();

package/src/features/tree/tree.spec.ts

@@ -235,8 +235,8 @@ describe("core-feature/selections", () => {
       it("generates item props for random item", () => {
         expect(tree.instance.getItemInstance("x2").getProps()).toEqual({
           "aria-label": "x2",
-          "aria-level": 0,
-          "aria-posinset": 1,
+          "aria-level": 1,
+          "aria-posinset": 2,
           "aria-selected": "false",
           "aria-setsize": 4,
           onClick: expect.any(Function),
@@ -249,8 +249,8 @@ describe("core-feature/selections", () => {
       it("generates item props for focused", () => {
         expect(tree.instance.getItemInstance("x1").getProps()).toEqual({
           "aria-label": "x1",
-          "aria-level": 0,
-          "aria-posinset": 0,
+          "aria-level": 1,
+          "aria-posinset": 1,
           "aria-selected": "false",
           "aria-setsize": 4,
           onClick: expect.any(Function),
@@ -472,4 +472,14 @@ describe("core-feature/selections", () => {
       });
     });
   });
+
+  describe("empty rootItemId", () => {
+    factory.with({ rootItemId: "" }).forSuits((tree) => {
+      describe("focused item", () => {
+        it("returns correct initial focused item", () => {
+          expect(tree.instance.getFocusedItem().getId()).toBe("1");
+        });
+      });
+    });
+  });
 });

package/src/test-utils/test-tree-do.ts

@@ -105,12 +105,14 @@ export class TestTreeDo<T> {
   dragEnd(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
     this.itemProps(itemId).onDragEnd(e);
+    window.dispatchEvent(new CustomEvent("dragend"));
     return e;
   }
 
   async drop(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
     await this.itemProps(itemId).onDrop(e);
+    window.dispatchEvent(new CustomEvent("dragend"));
     return e;
   }
 

package/src/test-utils/test-tree.ts

@@ -137,6 +137,7 @@ export class TestTree<T = string> {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     this.instance;
     await this.resolveAsyncVisibleItems();
+    this.instance.registerElement({ getBoundingClientRect: () => null } as any);
     return this;
   }
 

package/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["./src/**/*"],
-  "exclude": ["./src/**/*.spec.tsx", "./src/**/*.spec.ts", "./src/**/*.stories.tsx"],
-  "compilerOptions": {
-    "outDir": "lib/esm"
-  }
+  "exclude": ["./src/**/*.spec.tsx", "./src/**/*.spec.ts", "./src/**/*.stories.tsx"]
 }

package/vitest.config.ts

@@ -2,5 +2,7 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  test: {},
+  test: {
+    environment: "jsdom",
+  },
 });

package/lib/cjs/core/build-proxified-instance.d.ts

@@ -1,2 +0,0 @@
-import { InstanceBuilder } from "../features/main/types";
-export declare const buildProxiedInstance: InstanceBuilder;

package/lib/cjs/core/build-proxified-instance.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildProxiedInstance = void 0;
-const errors_1 = require("../utilities/errors");
-const noop = () => { };
-const findPrevInstanceMethod = (features, instanceType, methodKey, featureSearchIndex) => {
-    var _a;
-    for (let i = featureSearchIndex; i >= 0; i--) {
-        const feature = features[i];
-        const itemInstanceMethod = (_a = feature[instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
-        if (itemInstanceMethod) {
-            return i;
-        }
-    }
-    return null;
-};
-const invokeInstanceMethod = (features, instanceType, opts, methodKey, featureIndex, args) => {
-    var _a;
-    const prevIndex = findPrevInstanceMethod(features, instanceType, methodKey, featureIndex - 1);
-    const itemInstanceMethod = (_a = features[featureIndex][instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
-    return itemInstanceMethod(Object.assign(Object.assign({}, opts), { prev: prevIndex !== null
-            ? (...newArgs) => invokeInstanceMethod(features, instanceType, opts, methodKey, prevIndex, newArgs)
-            : null }), ...args);
-};
-const buildProxiedInstance = (features, instanceType, buildOpts) => {
-    // demo with prototypes: https://jsfiddle.net/bgenc58r/
-    const opts = {};
-    const item = new Proxy({}, {
-        has(target, key) {
-            if (typeof key === "symbol") {
-                return false;
-            }
-            if (key === "toJSON") {
-                return false;
-            }
-            const hasInstanceMethod = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
-            return Boolean(hasInstanceMethod);
-        },
-        get(target, key) {
-            if (typeof key === "symbol") {
-                return undefined;
-            }
-            if (key === "toJSON") {
-                return {};
-            }
-            return (...args) => {
-                const featureIndex = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
-                if (featureIndex === null) {
-                    throw (0, errors_1.throwError)(`feature missing for method ${key}`);
-                }
-                return invokeInstanceMethod(features, instanceType, opts, key, featureIndex, args);
-            };
-        },
-    });
-    Object.assign(opts, buildOpts(item));
-    return [item, noop];
-};
-exports.buildProxiedInstance = buildProxiedInstance;

package/lib/cjs/core/build-static-instance.d.ts

@@ -1,2 +0,0 @@
-import { InstanceBuilder } from "../features/main/types";
-export declare const buildStaticInstance: InstanceBuilder;

package/lib/cjs/core/build-static-instance.js

@@ -1,26 +0,0 @@
-"use strict";
-/* eslint-disable no-continue,no-labels,no-extra-label */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildStaticInstance = void 0;
-const buildStaticInstance = (features, instanceType, buildOpts) => {
-    const instance = {};
-    const finalize = () => {
-        const opts = buildOpts(instance);
-        featureLoop: for (let i = 0; i < features.length; i++) {
-            // Loop goes in forward order, each features overwrite previous ones and wraps those in a prev() fn
-            const definition = features[i][instanceType];
-            if (!definition)
-                continue featureLoop;
-            methodLoop: for (const [key, method] of Object.entries(definition)) {
-                if (!method)
-                    continue methodLoop;
-                const prev = instance[key];
-                instance[key] = (...args) => {
-                    return method(Object.assign(Object.assign({}, opts), { prev }), ...args);
-                };
-            }
-        }
-    };
-    return [instance, finalize];
-};
-exports.buildStaticInstance = buildStaticInstance;

package/lib/cjs/core/create-tree.d.ts

@@ -1,2 +0,0 @@
-import { TreeConfig, TreeInstance } from "../types/core";
-export declare const createTree: <T>(initialConfig: TreeConfig<T>) => TreeInstance<T>;

package/lib/cjs/core/create-tree.js

@@ -1,191 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTree = void 0;
-const feature_1 = require("../features/tree/feature");
-const build_static_instance_1 = require("./build-static-instance");
-const errors_1 = require("../utilities/errors");
-const verifyFeatures = (features) => {
-    var _a;
-    const loadedFeatures = features === null || features === void 0 ? void 0 : features.map((feature) => feature.key);
-    for (const feature of features !== null && features !== void 0 ? features : []) {
-        const missingDependency = (_a = feature.deps) === null || _a === void 0 ? void 0 : _a.find((dep) => !(loadedFeatures === null || loadedFeatures === void 0 ? void 0 : loadedFeatures.includes(dep)));
-        if (missingDependency) {
-            throw (0, errors_1.throwError)(`${feature.key} needs ${missingDependency}`);
-        }
-    }
-};
-// Check all possible pairs and sort the array
-const exhaustiveSort = (arr, compareFn) => {
-    const n = arr.length;
-    for (let i = 0; i < n; i++) {
-        for (let j = i + 1; j < n; j++) {
-            if (compareFn(arr[j], arr[i]) < 0) {
-                [arr[i], arr[j]] = [arr[j], arr[i]];
-            }
-        }
-    }
-    return arr;
-};
-const compareFeatures = (originalOrder) => (feature1, feature2) => {
-    var _a, _b;
-    if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
-        return 1;
-    }
-    if (feature1.key && ((_b = feature2.overwrites) === null || _b === void 0 ? void 0 : _b.includes(feature1.key))) {
-        return -1;
-    }
-    return originalOrder.indexOf(feature1) - originalOrder.indexOf(feature2);
-};
-const sortFeatures = (features = []) => exhaustiveSort(features, compareFeatures(features));
-const createTree = (initialConfig) => {
-    var _a, _b, _c, _d;
-    const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : build_static_instance_1.buildStaticInstance;
-    const additionalFeatures = [
-        feature_1.treeFeature,
-        ...sortFeatures(initialConfig.features),
-    ];
-    verifyFeatures(additionalFeatures);
-    const features = [...additionalFeatures];
-    const [treeInstance, finalizeTree] = buildInstance(features, "treeInstance", (tree) => ({ tree }));
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
-    let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
-    const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
-    let treeElement;
-    const treeDataRef = { current: {} };
-    const itemInstancesMap = {};
-    let itemInstances = [];
-    const itemElementsMap = {};
-    const itemDataRefs = {};
-    let itemMetaMap = {};
-    const hotkeyPresets = {};
-    const rebuildItemMeta = () => {
-        // TODO can we find a way to only run this for the changed substructure?
-        itemInstances = [];
-        itemMetaMap = {};
-        const [rootInstance, finalizeRootInstance] = buildInstance(features, "itemInstance", (item) => ({ item, tree: treeInstance, itemId: config.rootItemId }));
-        finalizeRootInstance();
-        itemInstancesMap[config.rootItemId] = rootInstance;
-        itemMetaMap[config.rootItemId] = {
-            itemId: config.rootItemId,
-            index: -1,
-            parentId: null,
-            level: -1,
-            posInSet: 0,
-            setSize: 1,
-        };
-        for (const item of treeInstance.getItemsMeta()) {
-            itemMetaMap[item.itemId] = item;
-            if (!itemInstancesMap[item.itemId]) {
-                const [instance, finalizeInstance] = buildInstance(features, "itemInstance", (instance) => ({
-                    item: instance,
-                    tree: treeInstance,
-                    itemId: item.itemId,
-                }));
-                finalizeInstance();
-                itemInstancesMap[item.itemId] = instance;
-                itemInstances.push(instance);
-            }
-            else {
-                itemInstances.push(itemInstancesMap[item.itemId]);
-            }
-        }
-    };
-    const eachFeature = (fn) => {
-        for (const feature of additionalFeatures) {
-            fn(feature);
-        }
-    };
-    const mainFeature = {
-        key: "main",
-        treeInstance: {
-            getState: () => state,
-            setState: ({}, updater) => {
-                var _a;
-                // Not necessary, since I think the subupdate below keeps the state fresh anyways?
-                // state = typeof updater === "function" ? updater(state) : updater;
-                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state); // TODO this cant be right... This doesnt allow external state updates
-                // TODO this is never used, remove
-            },
-            applySubStateUpdate: ({}, stateName, updater) => {
-                state[stateName] =
-                    typeof updater === "function" ? updater(state[stateName]) : updater;
-                const externalStateSetter = config[stateHandlerNames[stateName]];
-                externalStateSetter === null || externalStateSetter === void 0 ? void 0 : externalStateSetter(state[stateName]);
-            },
-            buildItemInstance: ({}, itemId) => {
-                const [instance, finalizeInstance] = buildInstance(features, "itemInstance", (instance) => ({
-                    item: instance,
-                    tree: treeInstance,
-                    itemId,
-                }));
-                finalizeInstance();
-                return instance;
-            },
-            // TODO rebuildSubTree: (itemId: string) => void;
-            rebuildTree: () => {
-                var _a;
-                rebuildItemMeta();
-                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            },
-            getConfig: () => config,
-            setConfig: (_, updater) => {
-                var _a, _b, _c;
-                const newConfig = typeof updater === "function" ? updater(config) : updater;
-                const hasChangedExpandedItems = ((_a = newConfig.state) === null || _a === void 0 ? void 0 : _a.expandedItems) &&
-                    ((_b = newConfig.state) === null || _b === void 0 ? void 0 : _b.expandedItems) !== state.expandedItems;
-                config = newConfig;
-                if (newConfig.state) {
-                    state = Object.assign(Object.assign({}, state), newConfig.state);
-                }
-                if (hasChangedExpandedItems) {
-                    // if expanded items where changed from the outside
-                    rebuildItemMeta();
-                    (_c = config.setState) === null || _c === void 0 ? void 0 : _c.call(config, state);
-                }
-            },
-            getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
-            getItems: () => itemInstances,
-            registerElement: ({}, element) => {
-                if (treeElement === element) {
-                    return;
-                }
-                if (treeElement && !element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onTreeUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, treeElement); });
-                }
-                else if (!treeElement && element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onTreeMount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, element); });
-                }
-                treeElement = element;
-            },
-            getElement: () => treeElement,
-            getDataRef: () => treeDataRef,
-            getHotkeyPresets: () => hotkeyPresets,
-        },
-        itemInstance: {
-            registerElement: ({ itemId, item }, element) => {
-                if (itemElementsMap[itemId] === element) {
-                    return;
-                }
-                const oldElement = itemElementsMap[itemId];
-                if (oldElement && !element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, item, oldElement, treeInstance); });
-                }
-                else if (!oldElement && element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, item, element, treeInstance); });
-                }
-                itemElementsMap[itemId] = element;
-            },
-            getElement: ({ itemId }) => itemElementsMap[itemId],
-            // eslint-disable-next-line no-return-assign
-            getDataRef: ({ itemId }) => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); },
-            getItemMeta: ({ itemId }) => itemMetaMap[itemId],
-        },
-    };
-    features.unshift(mainFeature);
-    for (const feature of features) {
-        Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
-    }
-    finalizeTree();
-    return treeInstance;
-};
-exports.createTree = createTree;

package/lib/cjs/features/async-data-loader/feature.d.ts

@@ -1,2 +0,0 @@
-import { FeatureImplementation } from "../../types/core";
-export declare const asyncDataLoaderFeature: FeatureImplementation;