@headless-tree/core 0.0.11 → 0.0.13

package/lib/esm/features/drag-and-drop/feature.js

@@ -1,9 +1,9 @@
 import { canDrop, getDragCode, getDropTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
-    key: "dragAndDrop",
+    key: "drag-and-drop",
     deps: ["selection"],
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree), canDropInbetween: true }, defaultConfig)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree), canReorder: true }, defaultConfig)),
     stateHandlerNames: {
         dnd: "setDndState",
     },
@@ -13,33 +13,33 @@ export const dragAndDropFeature = {
             return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
         },
         getDragLineData: ({ tree }) => {
-            var _a, _b, _c, _d, _e;
-            // TODO doesnt work if scrolled down!
+            var _a, _b, _c, _d, _e, _f;
             const target = tree.getDropTarget();
-            const indent = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1; // TODO rename to indent
-            if (!target || target.childIndex === null)
+            const indent = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
+            const treeBb = (_b = tree.getElement()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (!target || !treeBb || target.childIndex === null)
                 return null;
-            const leftOffset = target.dragLineLevel * ((_b = tree.getConfig().indent) !== null && _b !== void 0 ? _b : 1);
+            const leftOffset = target.dragLineLevel * ((_c = tree.getConfig().indent) !== null && _c !== void 0 ? _c : 1);
             const targetItem = tree.getItems()[target.dragLineIndex];
             if (!targetItem) {
-                const bb = (_d = (_c = tree
-                    .getItems()[target.dragLineIndex - 1]) === null || _c === void 0 ? void 0 : _c.getElement()) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
+                const bb = (_e = (_d = tree
+                    .getItems()[target.dragLineIndex - 1]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
                 if (bb) {
                     return {
                         indent,
-                        top: bb.bottom,
-                        left: bb.left + leftOffset,
-                        right: bb.right,
+                        top: bb.bottom - treeBb.bottom,
+                        left: bb.left + leftOffset - treeBb.left,
+                        width: bb.width - leftOffset,
                     };
                 }
             }
-            const bb = (_e = targetItem.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+            const bb = (_f = targetItem.getElement()) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect();
             if (bb) {
                 return {
                     indent,
-                    top: bb.top,
-                    left: bb.left + leftOffset,
-                    right: bb.right,
+                    top: bb.top - treeBb.top,
+                    left: bb.left + leftOffset - treeBb.left,
+                    width: bb.width - leftOffset,
                 };
             }
             return null;
@@ -50,17 +50,20 @@ export const dragAndDropFeature = {
                 ? {
                     top: `${dragLine.top + topOffset}px`,
                     left: `${dragLine.left + leftOffset}px`,
-                    width: `${dragLine.right - dragLine.left - leftOffset}px`,
+                    width: `${dragLine.width - leftOffset}px`,
                     pointerEvents: "none", // important to prevent capturing drag events
                 }
                 : { display: "none" };
         },
+        getContainerProps: ({ prev }) => {
+            const prevProps = prev === null || prev === void 0 ? void 0 : prev();
+            return Object.assign(Object.assign({}, prevProps), { style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
+        },
     },
     itemInstance: {
-        // TODO instead of individual getMemoizedProp calls, use a wrapped getMemoizedProps or something (getProps: () => getMemoized({...})
         getProps: ({ tree, item, prev }) => {
             var _a, _b, _c;
-            return (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
+            return (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: (e) => {
                     var _a, _b, _c;
                     const selectedItems = tree.getSelectedItems();
                     const items = selectedItems.includes(item) ? selectedItems : [item];
@@ -80,7 +83,7 @@ export const dragAndDropFeature = {
                         draggedItems: items,
                         draggingOverItem: tree.getFocusedItem(),
                     });
-                }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
+                }, onDragOver: (e) => {
                     var _a, _b, _c;
                     const dataRef = tree.getDataRef();
                     const nextDragCode = getDragCode(e, item, tree);
@@ -106,11 +109,11 @@ export const dragAndDropFeature = {
                     tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
                     dataRef.current.lastAllowDrop = true;
                     e.preventDefault();
-                }), onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
+                }, onDragLeave: () => {
                     const dataRef = tree.getDataRef();
                     dataRef.current.lastDragCode = "no-drag";
                     tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
-                }), onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
+                }, onDragEnd: (e) => {
                     var _a, _b, _c, _d;
                     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
                     tree.applySubStateUpdate("dnd", null);
@@ -118,7 +121,7 @@ export const dragAndDropFeature = {
                         return;
                     }
                     (_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
-                }), onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
+                }, onDrop: (e) => {
                     var _a, _b, _c;
                     const dataRef = tree.getDataRef();
                     const target = getDropTarget(e, item, tree);
@@ -137,7 +140,7 @@ export const dragAndDropFeature = {
                         (_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target);
                     }
                     // TODO rebuild tree?
-                }) }));
+                } }));
         },
         isDropTarget: ({ tree, item }) => {
             const target = tree.getDropTarget();

package/lib/esm/features/drag-and-drop/types.d.ts

@@ -12,7 +12,7 @@ export type DragLineData = {
     indent: number;
     top: number;
     left: number;
-    right: number;
+    width: number;
 };
 export type DropTarget<T> = {
     item: ItemInstance<T>;
@@ -40,9 +40,9 @@ export type DragAndDropFeatureDef<T> = {
         setDndState?: SetStateFn<DndState<T> | undefined | null>;
         /** Defines the size of the area at the top and bottom of an item where, when an item is dropped, the item willö
          * be placed above or below the item within the same parent, as opposed to being placed inside the item.
-         * If `canDropInbetween` is `false`, this is ignored. */
+         * If `canReorder` is `false`, this is ignored. */
         reorderAreaPercentage?: number;
-        canDropInbetween?: boolean;
+        canReorder?: boolean;
         isItemDraggable?: (item: ItemInstance<T>) => boolean;
         canDrag?: (items: ItemInstance<T>[]) => boolean;
         canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;

package/lib/esm/features/drag-and-drop/utils.d.ts

@@ -2,4 +2,4 @@ import { ItemInstance, TreeInstance } from "../../types/core";
 import { DropTarget } from "./types";
 export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
 export declare const getDragCode: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => string;
-export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canDropInbetween?: boolean | undefined) => DropTarget<any>;
+export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DropTarget<any>;

package/lib/esm/features/drag-and-drop/utils.js

@@ -43,7 +43,7 @@ const getItemDropCategory = (item) => {
 const getTargetPlacement = (e, item, tree, canMakeChild) => {
     var _a, _b, _c;
     const config = tree.getConfig();
-    if (!config.canDropInbetween) {
+    if (!config.canReorder) {
         return canMakeChild
             ? { type: PlacementType.MakeChild }
             : { type: PlacementType.ReorderBelow };
@@ -100,7 +100,7 @@ const getNthParent = (item, n) => {
     }
     return getNthParent(item.getParent(), n);
 };
-export const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
+export const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) => {
     var _a, _b, _c;
     const draggedItems = (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) !== null && _b !== void 0 ? _b : [];
     const itemMeta = item.getItemMeta();
@@ -124,13 +124,13 @@ export const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig()
     const canBecomeSibling = parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
     const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
     const placement = getTargetPlacement(e, item, tree, canMakeChild);
-    if (!canDropInbetween &&
+    if (!canReorder &&
         parent &&
         canBecomeSibling &&
         placement.type !== PlacementType.MakeChild) {
         return parentTarget;
     }
-    if (!canDropInbetween && parent && !canBecomeSibling) {
+    if (!canReorder && parent && !canBecomeSibling) {
         // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DropTargetStrategy[] ?
         return getDropTarget(e, parent, tree, false);
     }

package/lib/esm/features/expand-all/feature.d.ts

@@ -1,6 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { ExpandAllFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
-export declare const expandAllFeature: FeatureImplementation<any, ExpandAllFeatureDef, MainFeatureDef | TreeFeatureDef<any> | SyncDataLoaderFeatureDef<any> | ExpandAllFeatureDef>;
+export declare const expandAllFeature: FeatureImplementation;

package/lib/esm/features/hotkeys-core/feature.d.ts

@@ -1,4 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { HotkeysCoreFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-export declare const hotkeysCoreFeature: FeatureImplementation<any, HotkeysCoreFeatureDef<any>, MainFeatureDef | HotkeysCoreFeatureDef<any>>;
+export declare const hotkeysCoreFeature: FeatureImplementation;

package/lib/esm/features/prop-memoization/feature.d.ts

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

package/lib/esm/features/prop-memoization/feature.js

@@ -0,0 +1,45 @@
+const memoize = (props, dataRef) => {
+    var _a;
+    (_a = dataRef.memoizedProps) !== null && _a !== void 0 ? _a : (dataRef.memoizedProps = {});
+    for (const key in props) {
+        if (typeof props[key] === "function") {
+            if (key in dataRef.memoizedProps) {
+                props[key] = dataRef.memoizedProps[key];
+            }
+            else {
+                dataRef.memoizedProps[key] = props[key];
+            }
+        }
+    }
+    return props;
+};
+export const propMemoizationFeature = {
+    key: "prop-memoization",
+    overwrites: [
+        "main",
+        "async-data-loader",
+        "sync-data-loader",
+        "drag-and-drop",
+        "expand-all",
+        "hotkeys-core",
+        "renaming",
+        "search",
+        "selection",
+    ],
+    treeInstance: {
+        getContainerProps: ({ tree, prev }) => {
+            var _a;
+            const dataRef = tree.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            return memoize(props, dataRef.current);
+        },
+    },
+    itemInstance: {
+        getProps: ({ item, prev }) => {
+            var _a;
+            const dataRef = item.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            return memoize(props, dataRef.current);
+        },
+    },
+};

package/lib/esm/features/prop-memoization/types.d.ts

@@ -0,0 +1,10 @@
+export type PropMemoizationDataRef = {
+    memoizedProps?: Record<string, any>;
+};
+export type PropMemoizationFeatureDef = {
+    state: {};
+    config: {};
+    treeInstance: {};
+    itemInstance: {};
+    hotkeys: never;
+};

package/lib/esm/features/prop-memoization/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/features/renaming/feature.d.ts

@@ -1,5 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { RenamingFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-export declare const renamingFeature: FeatureImplementation<any, RenamingFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>>;
+export declare const renamingFeature: FeatureImplementation;

package/lib/esm/features/renaming/feature.js

@@ -7,14 +7,6 @@ export const renamingFeature = {
         renamingValue: "setRenamingValue",
     },
     treeInstance: {
-        startRenamingItem: ({ tree }, itemId) => {
-            const item = tree.getItemInstance(itemId);
-            if (!item.canRename()) {
-                return;
-            }
-            tree.applySubStateUpdate("renamingItem", itemId);
-            tree.applySubStateUpdate("renamingValue", item.getItemName());
-        },
         getRenamingItem: ({ tree }) => {
             const itemId = tree.getState().renamingItem;
             return itemId ? tree.getItemInstance(itemId) : null;
@@ -37,6 +29,13 @@ export const renamingFeature = {
         isRenamingItem: ({ tree }) => !!tree.getState().renamingItem,
     },
     itemInstance: {
+        startRenaming: ({ tree, item, itemId }) => {
+            if (!item.canRename()) {
+                return;
+            }
+            tree.applySubStateUpdate("renamingItem", itemId);
+            tree.applySubStateUpdate("renamingValue", item.getItemName());
+        },
         getRenameInputProps: ({ tree }) => ({
             onBlur: () => tree.abortRenaming(),
             value: tree.getRenamingValue(),
@@ -53,7 +52,7 @@ export const renamingFeature = {
         renameItem: {
             hotkey: "F2",
             handler: (e, tree) => {
-                tree.startRenamingItem(tree.getFocusedItem().getId());
+                tree.getFocusedItem().startRenaming();
             },
         },
         abortRenaming: {

package/lib/esm/features/renaming/types.d.ts

@@ -11,7 +11,6 @@ export type RenamingFeatureDef<T> = {
         onRename?: (item: ItemInstance<T>, value: string) => void;
     };
     treeInstance: {
-        startRenamingItem: (itemId: string) => void;
         getRenamingItem: () => ItemInstance<T> | null;
         getRenamingValue: () => string;
         abortRenaming: () => void;
@@ -22,6 +21,7 @@ export type RenamingFeatureDef<T> = {
         getRenameInputProps: () => any;
         canRename: () => boolean;
         isRenaming: () => boolean;
+        startRenaming: () => void;
     };
     hotkeys: "renameItem" | "abortRenaming" | "completeRenaming";
 };

package/lib/esm/features/search/feature.d.ts

@@ -1,5 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { SearchFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-export declare const searchFeature: FeatureImplementation<any, SearchFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | SearchFeatureDef<any>>;
+export declare const searchFeature: FeatureImplementation;

package/lib/esm/features/selection/feature.d.ts

@@ -1,5 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { SelectionFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-export declare const selectionFeature: FeatureImplementation<any, SelectionFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | SelectionFeatureDef<any>>;
+export declare const selectionFeature: FeatureImplementation;

package/lib/esm/features/selection/feature.js

@@ -16,15 +16,15 @@ export const selectionFeature = {
         },
     },
     itemInstance: {
-        select: ({ tree, item }) => {
+        select: ({ tree, itemId }) => {
             const { selectedItems } = tree.getState();
-            tree.setSelectedItems(selectedItems.includes(item.getItemMeta().itemId)
+            tree.setSelectedItems(selectedItems.includes(itemId)
                 ? selectedItems
-                : [...selectedItems, item.getItemMeta().itemId]);
+                : [...selectedItems, itemId]);
         },
-        deselect: ({ tree, item }) => {
+        deselect: ({ tree, itemId }) => {
             const { selectedItems } = tree.getState();
-            tree.setSelectedItems(selectedItems.filter((id) => id !== item.getItemMeta().itemId));
+            tree.setSelectedItems(selectedItems.filter((id) => id !== itemId));
         },
         isSelected: ({ tree, item }) => {
             const { selectedItems } = tree.getState();
@@ -57,7 +57,7 @@ export const selectionFeature = {
                 item.select();
             }
         },
-        getProps: ({ tree, item, prev }) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { "aria-selected": item.isSelected() ? "true" : "false", onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
+        getProps: ({ tree, item, prev }) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { "aria-selected": item.isSelected() ? "true" : "false", onClick: (e) => {
                 var _a, _b;
                 if (e.shiftKey) {
                     item.selectUpTo(e.ctrlKey || e.metaKey);
@@ -69,7 +69,7 @@ export const selectionFeature = {
                     tree.setSelectedItems([item.getItemMeta().itemId]);
                 }
                 (_b = (_a = prev === null || prev === void 0 ? void 0 : prev()) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-            }) })),
+            } })),
     },
     hotkeys: {
         // setSelectedItem: {
@@ -85,27 +85,37 @@ export const selectionFeature = {
             },
         },
         selectUpwards: {
-            hotkey: "shift+ArrowUp",
-            handler: () => {
-                // TODO
+            hotkey: "Shift+ArrowUp",
+            handler: (e, tree) => {
+                const focused = tree.getFocusedItem();
+                const above = focused.getItemAbove();
+                if (!above)
+                    return;
+                if (focused.isSelected() && above.isSelected()) {
+                    focused.deselect();
+                }
+                else {
+                    above.select();
+                }
+                above.setFocused();
+                tree.updateDomFocus();
             },
         },
         selectDownwards: {
-            hotkey: "shift+ArrowDown",
-            handler: () => {
-                // TODO
-            },
-        },
-        selectUpwardsCtrl: {
-            hotkey: "shift+ctrl+ArrowUp",
-            handler: () => {
-                // TODO
-            },
-        },
-        selectDownwardsCtrl: {
-            hotkey: "shift+ctrl+ArrowUp",
-            handler: () => {
-                // TODO
+            hotkey: "Shift+ArrowDown",
+            handler: (e, tree) => {
+                const focused = tree.getFocusedItem();
+                const below = focused.getItemBelow();
+                if (!below)
+                    return;
+                if (focused.isSelected() && below.isSelected()) {
+                    focused.deselect();
+                }
+                else {
+                    below.select();
+                }
+                below.setFocused();
+                tree.updateDomFocus();
             },
         },
         selectAll: {

package/lib/esm/features/selection/types.d.ts

@@ -17,5 +17,5 @@ export type SelectionFeatureDef<T> = {
         isSelected: () => boolean;
         selectUpTo: (ctrl: boolean) => void;
     };
-    hotkeys: "toggleSelectItem" | "selectUpwards" | "selectDownwards" | "selectUpwardsCtrl" | "selectDownwardsCtrl" | "selectAll";
+    hotkeys: "toggleSelectItem" | "selectUpwards" | "selectDownwards" | "selectAll";
 };

package/lib/esm/features/sync-data-loader/feature.d.ts

@@ -1,4 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { SyncDataLoaderFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-export declare const syncDataLoaderFeature: FeatureImplementation<any, SyncDataLoaderFeatureDef<any>, MainFeatureDef | SyncDataLoaderFeatureDef<any>>;
+export declare const syncDataLoaderFeature: FeatureImplementation;

package/lib/esm/features/tree/feature.d.ts

@@ -1,7 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { TreeFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { HotkeysCoreFeatureDef } from "../hotkeys-core/types";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
-import { SearchFeatureDef } from "../search/types";
-export declare const treeFeature: FeatureImplementation<any, TreeFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | HotkeysCoreFeatureDef<any> | SyncDataLoaderFeatureDef<any> | SearchFeatureDef<any>>;
+export declare const treeFeature: FeatureImplementation<any>;