feat: improve selectUpTo anchor item (#176)

Author: lukasbach

.changeset/slimy-years-cross.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/core": minor
+---
+
+The anchor for shift-selecting (`item.selectUpTo()`) is now the last item that was clicked while not holding shift, or alternatively the focused item if that didn't exist. The previous behavior was always using the focused item as anchor, which doesn't match common multi-select behaviors in similar applications (#176)

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

@@ -1,5 +1,6 @@
 import { FeatureImplementation } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
+import type { SelectionDataRef } from "./types";
 
 export const selectionFeature: FeatureImplementation = {
   key: "selection",
@@ -50,8 +51,12 @@ export const selectionFeature: FeatureImplementation = {
 
     selectUpTo: ({ tree, item }, ctrl: boolean) => {
       const indexA = item.getItemMeta().index;
-      // TODO dont use focused item as anchor, but last primary-clicked item
-      const indexB = tree.getFocusedItem().getItemMeta().index;
+      const { selectUpToAnchorId } =
+        tree.getDataRef<SelectionDataRef>().current;
+      const itemB = selectUpToAnchorId
+        ? tree.getItemInstance(selectUpToAnchorId)
+        : tree.getFocusedItem();
+      const indexB = itemB.getItemMeta().index;
       const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
       const newSelectedItems = tree
         .getItems()
@@ -90,6 +95,11 @@ export const selectionFeature: FeatureImplementation = {
           tree.setSelectedItems([item.getItemMeta().itemId]);
         }
 
+        if (!e.shiftKey) {
+          tree.getDataRef<SelectionDataRef>().current.selectUpToAnchorId =
+            item.getId();
+        }
+
         prev?.()?.onClick?.(e);
       },
     }),

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

@@ -1,5 +1,9 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 
+export interface SelectionDataRef {
+  selectUpToAnchorId?: string | null;
+}
+
 export type SelectionFeatureDef<T> = {
   state: {
     selectedItems: string[];