@headless-tree/core 0.0.1

package/src/features/selection/feature.ts

@@ -0,0 +1,153 @@
+import { FeatureImplementation } from "../../types/core";
+import { SelectionFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { makeStateUpdater } from "../../utils";
+
+export const selectionFeature: FeatureImplementation<
+  any,
+  SelectionFeatureDef<any>,
+  MainFeatureDef | TreeFeatureDef<any> | SelectionFeatureDef<any>
+> = {
+  key: "selection",
+  dependingFeatures: ["main", "tree"],
+
+  getInitialState: (initialState) => ({
+    selectedItems: [],
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setSelectedItems: makeStateUpdater("selectedItems", tree),
+    ...defaultConfig,
+  }),
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    setSelectedItems: (selectedItems) => {
+      instance.getConfig().setSelectedItems?.(selectedItems);
+    },
+
+    // TODO memo
+    getSelectedItems: () => {
+      return instance.getState().selectedItems.map(instance.getItemInstance);
+    },
+  }),
+
+  createItemInstance: (prev, item, tree) => ({
+    ...prev,
+
+    select: () => {
+      const { selectedItems } = tree.getState();
+      tree.setSelectedItems(
+        selectedItems.includes(item.getItemMeta().itemId)
+          ? selectedItems
+          : [...selectedItems, item.getItemMeta().itemId]
+      );
+    },
+
+    deselect: () => {
+      const { selectedItems } = tree.getState();
+      tree.setSelectedItems(
+        selectedItems.filter((id) => id !== item.getItemMeta().itemId)
+      );
+    },
+
+    isSelected: () => {
+      const { selectedItems } = tree.getState();
+      return selectedItems.includes(item.getItemMeta().itemId);
+    },
+
+    selectUpTo: (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 [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
+      const newSelectedItems = tree
+        .getItems()
+        .slice(a, b + 1)
+        .map((item) => item.getItemMeta().itemId);
+
+      if (!ctrl) {
+        tree.setSelectedItems(newSelectedItems);
+        return;
+      }
+
+      const { selectedItems } = tree.getState();
+      const uniqueSelectedItems = [
+        ...new Set([...selectedItems, ...newSelectedItems]),
+      ];
+      tree.setSelectedItems(uniqueSelectedItems);
+    },
+
+    toggleSelect: () => {
+      if (item.isSelected()) {
+        item.deselect();
+      } else {
+        item.select();
+      }
+    },
+
+    getProps: () => ({
+      ...prev.getProps(),
+      onClick: (e) => {
+        if (e.shiftKey) {
+          item.selectUpTo(e.ctrlKey || e.metaKey);
+        } else if (e.ctrlKey || e.metaKey) {
+          item.toggleSelect();
+        } else {
+          tree.setSelectedItems([item.getItemMeta().itemId]);
+        }
+
+        prev.getProps().onClick?.(e);
+      },
+    }),
+  }),
+
+  hotkeys: {
+    // setSelectedItem: {
+    //   hotkey: "space",
+    //   handler: (e, tree) => {
+    //     tree.setSelectedItems([tree.getFocusedItem().getId()]);
+    //   },
+    // },
+    toggleSelectItem: {
+      hotkey: "ctrl+space",
+      handler: (e, tree) => {
+        tree.getFocusedItem().toggleSelect();
+      },
+    },
+    selectUpwards: {
+      hotkey: "shift+ArrowUp",
+      handler: () => {
+        // TODO
+      },
+    },
+    selectDownwards: {
+      hotkey: "shift+ArrowDown",
+      handler: () => {
+        // TODO
+      },
+    },
+    selectUpwardsCtrl: {
+      hotkey: "shift+ctrl+ArrowUp",
+      handler: () => {
+        // TODO
+      },
+    },
+    selectDownwardsCtrl: {
+      hotkey: "shift+ctrl+ArrowUp",
+      handler: () => {
+        // TODO
+      },
+    },
+    selectAll: {
+      hotkey: "Control+a",
+      preventDefault: true,
+      handler: (e, tree) => {
+        tree.setSelectedItems(tree.getItems().map((item) => item.getId()));
+      },
+    },
+  },
+};

package/src/features/selection/types.ts

@@ -0,0 +1,28 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+
+export type SelectionFeatureDef<T> = {
+  state: {
+    selectedItems: string[];
+  };
+  config: {
+    setSelectedItems?: SetStateFn<string[]>;
+  };
+  treeInstance: {
+    setSelectedItems: (selectedItems: string[]) => void;
+    getSelectedItems: () => ItemInstance<T>[];
+  };
+  itemInstance: {
+    select: () => void;
+    deselect: () => void;
+    toggleSelect: () => void;
+    isSelected: () => boolean;
+    selectUpTo: (ctrl: boolean) => void;
+  };
+  hotkeys:
+    | "toggleSelectItem"
+    | "selectUpwards"
+    | "selectDownwards"
+    | "selectUpwardsCtrl"
+    | "selectDownwardsCtrl"
+    | "selectAll";
+};

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

@@ -0,0 +1,27 @@
+import { FeatureImplementation } from "../../types/core";
+import { SyncDataLoaderFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+
+export const syncDataLoaderFeature: FeatureImplementation<
+  any,
+  SyncDataLoaderFeatureDef<any>,
+  MainFeatureDef | SyncDataLoaderFeatureDef<any>
+> = {
+  key: "sync-data-loader",
+  dependingFeatures: ["main"],
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    retrieveItemData: (itemId) =>
+      instance.getConfig().dataLoader.getItem(itemId),
+
+    retrieveChildrenIds: (itemId) =>
+      instance.getConfig().dataLoader.getChildren(itemId),
+  }),
+
+  createItemInstance: (prev) => ({
+    ...prev,
+    isLoading: () => false,
+  }),
+};

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

@@ -0,0 +1,20 @@
+export type SyncTreeDataLoader<T> = {
+  getItem: (itemId: string) => T;
+  getChildren: (itemId: string) => string[];
+};
+
+export type SyncDataLoaderFeatureDef<T> = {
+  state: {};
+  config: {
+    rootItemId: string;
+    dataLoader: SyncTreeDataLoader<T>;
+  };
+  treeInstance: {
+    retrieveItemData: (itemId: string) => T;
+    retrieveChildrenIds: (itemId: string) => string[];
+  };
+  itemInstance: {
+    isLoading: () => boolean;
+  };
+  hotkeys: never;
+};

package/src/features/tree/feature.ts

@@ -0,0 +1,307 @@
+import { FeatureImplementation, ItemInstance } from "../../types/core";
+import { ItemMeta, TreeFeatureDef } from "./types";
+import { makeStateUpdater, memo, poll } from "../../utils";
+import { MainFeatureDef } from "../main/types";
+import { HotkeysCoreFeatureDef } from "../hotkeys-core/types";
+import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
+
+export const treeFeature: FeatureImplementation<
+  any,
+  TreeFeatureDef<any>,
+  | MainFeatureDef
+  | TreeFeatureDef<any>
+  | HotkeysCoreFeatureDef<any>
+  | SyncDataLoaderFeatureDef<any>
+> = {
+  key: "tree",
+  dependingFeatures: ["main"],
+
+  getInitialState: (initialState) => ({
+    expandedItems: [],
+    focusedItem: null,
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setExpandedItems: makeStateUpdater("expandedItems", tree),
+    setFocusedItem: makeStateUpdater("focusedItem", tree),
+    ...defaultConfig,
+  }),
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    retrieveItemData: () => {
+      throw new Error("No data-loader registered");
+    },
+
+    retrieveChildrenIds: () => {
+      throw new Error("No data-loader registered");
+    },
+
+    isItemExpanded: (itemId) =>
+      instance.getState().expandedItems.includes(itemId),
+
+    getItemsMeta: () => {
+      const { rootItemId } = instance.getConfig();
+      const { expandedItems } = instance.getState();
+      // console.log("!", instance.getConfig());
+      const flatItems: ItemMeta[] = [];
+
+      const recursiveAdd = (
+        itemId: string,
+        parentId: string,
+        level: number,
+        setSize: number,
+        posInSet: number
+      ) => {
+        flatItems.push({
+          itemId,
+          level,
+          index: flatItems.length,
+          parentId,
+          setSize,
+          posInSet,
+        });
+
+        if (expandedItems.includes(itemId)) {
+          const children = instance.retrieveChildrenIds(itemId) ?? [];
+          let i = 0;
+          for (const childId of children) {
+            recursiveAdd(childId, itemId, level + 1, children.length, i++);
+          }
+        }
+      };
+
+      const children = instance.retrieveChildrenIds(rootItemId);
+      let i = 0;
+      for (const itemId of children) {
+        recursiveAdd(itemId, rootItemId, 0, children.length, i++);
+      }
+
+      return flatItems;
+    },
+
+    expandItem: (itemId) => {
+      if (!instance.getItemInstance(itemId).isFolder()) {
+        return;
+      }
+
+      if (instance.getState().loadingItems?.includes(itemId)) {
+        return;
+      }
+
+      instance
+        .getConfig()
+        .setExpandedItems?.((expandedItems) => [...expandedItems, itemId]);
+      instance.rebuildTree();
+    },
+
+    collapseItem: (itemId) => {
+      if (!instance.getItemInstance(itemId).isFolder()) {
+        return;
+      }
+
+      instance
+        .getConfig()
+        .setExpandedItems?.((expandedItems) =>
+          expandedItems.filter((id) => id !== itemId)
+        );
+      instance.rebuildTree();
+    },
+
+    // TODO memo
+    getFocusedItem: () => {
+      return (
+        instance.getItemInstance(instance.getState().focusedItem ?? "") ??
+        instance.getItems()[0]
+      );
+    },
+
+    focusItem: (itemId) => {
+      instance.getConfig().setFocusedItem?.(itemId);
+    },
+
+    focusNextItem: () => {
+      const { index } = instance.getFocusedItem().getItemMeta();
+      const nextIndex = Math.min(index + 1, instance.getItems().length - 1);
+      instance.focusItem(instance.getItems()[nextIndex].getId());
+    },
+
+    focusPreviousItem: () => {
+      const { index } = instance.getFocusedItem().getItemMeta();
+      const nextIndex = Math.max(index - 1, 0);
+      instance.focusItem(instance.getItems()[nextIndex].getId());
+    },
+
+    updateDomFocus: (scrollIntoView) => {
+      // Required because if the state is managed outside in react, the state only updated during next render
+      setTimeout(async () => {
+        const focusedItem = instance.getFocusedItem();
+        instance.getConfig().scrollToItem?.(focusedItem);
+        await poll(() => focusedItem.getElement() !== null, 20);
+        const focusedElement = focusedItem.getElement();
+        if (!focusedElement) return;
+        focusedElement.focus();
+        // if (scrollIntoView) {
+        //   focusedElement.scrollIntoView();
+        // }
+      });
+    },
+
+    getContainerProps: () => ({
+      ...prev.getContainerProps?.(),
+      role: "tree",
+      ariaLabel: "",
+      ariaActivedescendant: "",
+    }),
+  }),
+
+  createItemInstance: (prev, item, tree) => ({
+    ...prev,
+    isLoading: () => {
+      throw new Error("No data-loader registered");
+    },
+    getId: () => item.getItemMeta().itemId,
+    getProps: () => {
+      const itemMeta = item.getItemMeta();
+      return {
+        ...prev.getProps?.(),
+        role: "treeitem",
+        "aria-setsize": itemMeta.setSize,
+        "aria-posinset": itemMeta.posInSet,
+        "aria-selected": false,
+        "aria-label": item.getItemName(),
+        "aria-level": itemMeta.level,
+        tabIndex: item.isFocused() ? 0 : -1,
+        onClick: (e) => {
+          item.setFocused();
+          item.primaryAction();
+
+          if (e.ctrlKey || e.shiftKey || e.metaKey) {
+            return;
+          }
+
+          if (!item.isFolder()) {
+            return;
+          }
+
+          if (item.isExpanded()) {
+            item.collapse();
+          } else {
+            item.expand();
+          }
+        },
+      };
+    },
+    expand: () => tree.expandItem(item.getItemMeta().itemId),
+    collapse: () => tree.collapseItem(item.getItemMeta().itemId),
+    getItemData: () => tree.retrieveItemData(item.getItemMeta().itemId),
+    isExpanded: () =>
+      tree.getState().expandedItems.includes(item.getItemMeta().itemId),
+    isFocused: () =>
+      tree.getState().focusedItem === item.getItemMeta().itemId ||
+      (tree.getState().focusedItem === null && item.getItemMeta().index === 0),
+    isFolder: () =>
+      item.getItemMeta().level === -1 ||
+      tree.getConfig().isItemFolder(item as ItemInstance<any>),
+    getItemName: () => {
+      const config = tree.getConfig();
+      return config.getItemName(item as ItemInstance<any>);
+    },
+    setFocused: () => tree.focusItem(item.getItemMeta().itemId),
+    primaryAction: () =>
+      tree.getConfig().onPrimaryAction?.(item as ItemInstance<any>),
+    getParent: memo(
+      (itemMeta) => {
+        for (let i = itemMeta.index - 1; i >= 0; i--) {
+          const potentialParent = tree.getItems()[i];
+          if (potentialParent.getItemMeta().level < itemMeta.level) {
+            return potentialParent;
+          }
+        }
+        return tree.getItemInstance(tree.getConfig().rootItemId);
+      },
+      () => [item.getItemMeta()]
+    ),
+    getIndexInParent: () =>
+      item.getItemMeta().index -
+      (item.getParent()?.getItemMeta().index ?? 0) -
+      1,
+    getChildren: () =>
+      tree
+        .retrieveChildrenIds(item.getItemMeta().itemId)
+        .map((id) => tree.getItemInstance(id)),
+    getTree: () => tree as any,
+    getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1],
+    getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1],
+  }),
+
+  hotkeys: {
+    focusNextItem: {
+      hotkey: "ArrowDown",
+      canRepeat: true,
+      preventDefault: true,
+      isEnabled: (tree) =>
+        !(tree.isSearchOpen?.() ?? false) && !tree.getState().dnd,
+      handler: (e, tree) => {
+        tree.focusNextItem();
+        tree.updateDomFocus();
+      },
+    },
+    focusPreviousItem: {
+      hotkey: "ArrowUp",
+      canRepeat: true,
+      preventDefault: true,
+      isEnabled: (tree) =>
+        !(tree.isSearchOpen?.() ?? false) && !tree.getState().dnd,
+      handler: (e, tree) => {
+        tree.focusPreviousItem();
+        tree.updateDomFocus();
+      },
+    },
+    expandOrDown: {
+      hotkey: "ArrowRight",
+      canRepeat: true,
+      handler: (e, tree) => {
+        const item = tree.getFocusedItem();
+        if (item.isExpanded() || !item.isFolder()) {
+          tree.focusNextItem();
+          tree.updateDomFocus();
+        } else {
+          item.expand();
+        }
+      },
+    },
+    collapseOrUp: {
+      hotkey: "ArrowLeft",
+      canRepeat: true,
+      handler: (e, tree) => {
+        const item = tree.getFocusedItem();
+        if (
+          (!item.isExpanded() || !item.isFolder()) &&
+          item.getItemMeta().level !== 0
+        ) {
+          item.getParent()?.setFocused();
+          tree.updateDomFocus(true);
+        } else {
+          item.collapse();
+        }
+      },
+    },
+    focusFirstItem: {
+      hotkey: "Home",
+      handler: (e, tree) => {
+        tree.focusItem(tree.getItems()[0].getId());
+        tree.updateDomFocus();
+      },
+    },
+    focusLastItem: {
+      hotkey: "End",
+      handler: (e, tree) => {
+        tree.focusItem(tree.getItems()[tree.getItems().length - 1].getId());
+        tree.updateDomFocus();
+      },
+    },
+  },
+};

package/src/features/tree/types.ts

@@ -0,0 +1,70 @@
+import { ItemInstance, SetStateFn, TreeInstance } from "../../types/core";
+
+export type ItemMeta = {
+  itemId: string;
+  parentId: string;
+  level: number;
+  index: number;
+  setSize: number;
+  posInSet: number;
+};
+
+export type TreeFeatureDef<T> = {
+  state: {
+    expandedItems: string[];
+    focusedItem: string | null;
+  };
+  config: {
+    isItemFolder: (item: ItemInstance<T>) => boolean;
+    getItemName: (item: ItemInstance<T>) => string;
+
+    onPrimaryAction?: (item: ItemInstance<T>) => void;
+    scrollToItem?: (item: ItemInstance<T>) => void;
+
+    setExpandedItems?: SetStateFn<string[]>;
+    setFocusedItem?: SetStateFn<string | null>;
+  };
+  treeInstance: {
+    /** @internal */
+    getItemsMeta: () => ItemMeta[];
+
+    expandItem: (itemId: string) => void;
+    collapseItem: (itemId: string) => void;
+    isItemExpanded: (itemId: string) => boolean;
+
+    focusItem: (itemId: string) => void;
+    getFocusedItem: () => ItemInstance<any>;
+    focusNextItem: () => void;
+    focusPreviousItem: () => void;
+    scrollToItem: (item: ItemInstance<any>) => void;
+    updateDomFocus: (scrollIntoView?: boolean) => void;
+
+    getContainerProps: () => Record<string, any>;
+  };
+  itemInstance: {
+    getId: () => string;
+    getProps: () => Record<string, any>;
+    getItemName: () => string;
+    getItemData: () => T;
+    expand: () => void;
+    collapse: () => void;
+    isExpanded: () => boolean;
+    isFocused: () => boolean;
+    isFolder: () => boolean;
+    setFocused: () => void;
+    getParent: () => ItemInstance<T>;
+    getChildren: () => ItemInstance<T>[];
+    getIndexInParent: () => number;
+    primaryAction: () => void;
+    getTree: () => TreeInstance<T>;
+    getItemAbove: () => ItemInstance<T> | null;
+    getItemBelow: () => ItemInstance<T> | null;
+  };
+  hotkeys:
+    | "focusNextItem"
+    | "focusPreviousItem"
+    | "expandOrDown"
+    | "collapseOrUp"
+    | "focusFirstItem"
+    | "focusLastItem";
+};

package/src/index.ts

@@ -0,0 +1,23 @@
+export * from "./types/core";
+export * from "./core/create-tree";
+export * from "./features/tree/types";
+export * from "./features/main/types";
+export * from "./features/drag-and-drop/types";
+export * from "./features/selection/types";
+export * from "./features/async-data-loader/types";
+export * from "./features/sync-data-loader/types";
+export * from "./features/hotkeys-core/types";
+export * from "./features/search/types";
+export * from "./features/renaming/types";
+export * from "./features/expand-all/types";
+
+export * from "./features/selection/feature";
+export * from "./features/hotkeys-core/feature";
+export * from "./features/async-data-loader/feature";
+export * from "./features/sync-data-loader/feature";
+export * from "./features/drag-and-drop/feature";
+export * from "./features/search/feature";
+export * from "./features/renaming/feature";
+export * from "./features/expand-all/feature";
+
+export * from "./data-adapters/nested-data-adapter";

package/src/mddocs-entry.ts

@@ -0,0 +1,26 @@
+import { MainFeatureDef } from "./features/main/types";
+import { DragAndDropFeatureDef } from "./features/drag-and-drop/types";
+
+export * from ".";
+
+/** @interface */
+export type MainFeatureConfig = MainFeatureDef["config"];
+/** @interface */
+export type MainFeatureState = MainFeatureDef["state"];
+/** @interface */
+export type MainFeatureTreeInstance = MainFeatureDef["treeInstance"];
+/** @interface */
+export type MainFeatureItemInstance = MainFeatureDef["itemInstance"];
+export type MainFeatureHotkeys = MainFeatureDef["hotkeys"];
+
+/** @interface */
+export type DragAndDropFeatureConfig<T> = DragAndDropFeatureDef<T>["config"];
+/** @interface */
+export type DragAndDropFeatureState<T> = DragAndDropFeatureDef<T>["state"];
+/** @interface */
+export type DragAndDropFeatureTreeInstance<T> =
+  DragAndDropFeatureDef<T>["treeInstance"];
+/** @interface */
+export type DragAndDropFeatureItemInstance<T> =
+  DragAndDropFeatureDef<T>["itemInstance"];
+export type DragAndDropFeatureHotkeys<T> = DragAndDropFeatureDef<T>["hotkeys"];