@headless-tree/core 0.0.0-20230802230636

package/src/features/search/types.ts

@@ -0,0 +1,40 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+import { HotkeysCoreDataRef } from "../hotkeys-core/types";
+
+export type SearchFeatureDataRef<T = any> = HotkeysCoreDataRef & {
+  matchingItems: ItemInstance<T>[];
+  searchInput: HTMLInputElement | null;
+};
+
+export type SearchFeatureDef<T> = {
+  state: {
+    search: string | null;
+  };
+  config: {
+    setSearch?: SetStateFn<string | null>;
+    onOpenSearch?: () => void;
+    onCloseSearch?: () => void;
+    onSearchMatchesItems?: (search: string, items: ItemInstance<T>[]) => void;
+    isSearchMatchingItem?: (search: string, item: ItemInstance<T>) => boolean;
+  };
+  treeInstance: {
+    setSearch: (search: string | null) => void;
+    openSearch: (initialValue?: string) => void;
+    closeSearch: () => void;
+    isSearchOpen: () => boolean;
+    getSearchValue: () => string;
+    registerSearchInputElement: (element: HTMLInputElement | null) => void;
+    getSearchInputElement: () => HTMLInputElement | null;
+    getSearchInputElementProps: () => any;
+    getSearchMatchingItems: () => ItemInstance<T>[];
+  };
+  itemInstance: {
+    isMatchingSearch: () => boolean;
+  };
+  hotkeys:
+    | "openSearch"
+    | "closeSearch"
+    | "submitSearch"
+    | "nextSearchItem"
+    | "previousSearchItem";
+};

package/src/features/selection/feature.ts

@@ -0,0 +1,157 @@
+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",
+
+  getInitialState: (initialState) => ({
+    selectedItems: [],
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setSelectedItems: makeStateUpdater("selectedItems", tree),
+    ...defaultConfig,
+  }),
+
+  stateHandlerNames: {
+    selectedItems: "setSelectedItems",
+  },
+
+  createTreeInstance: (prev, instance) => ({
+    ...prev,
+
+    setSelectedItems: (selectedItems) => {
+      instance.applySubStateUpdate("selectedItems", 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((treeItem) => treeItem.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(),
+      "aria-selected": item.isSelected() ? "true" : "false",
+      onClick: item.getMemoizedProp("selection/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,41 @@
+import { FeatureImplementation } from "../../types/core";
+import { SyncDataLoaderFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { makeStateUpdater } from "../../utils";
+
+export const syncDataLoaderFeature: FeatureImplementation<
+  any,
+  SyncDataLoaderFeatureDef<any>,
+  MainFeatureDef | SyncDataLoaderFeatureDef<any>
+> = {
+  key: "sync-data-loader",
+
+  getInitialState: (initialState) => ({
+    loadingItems: [],
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setLoadingItems: makeStateUpdater("loadingItems", tree),
+    ...defaultConfig,
+  }),
+
+  stateHandlerNames: {
+    loadingItems: "setLoadingItems",
+  },
+
+  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,326 @@
+import { FeatureImplementation, ItemInstance } from "../../types/core";
+import { ItemMeta, TreeFeatureDef, TreeItemDataRef } 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",
+
+  getInitialState: (initialState) => ({
+    expandedItems: [],
+    focusedItem: null,
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setExpandedItems: makeStateUpdater("expandedItems", tree),
+    setFocusedItem: makeStateUpdater("focusedItem", tree),
+    ...defaultConfig,
+  }),
+
+  stateHandlerNames: {
+    expandedItems: "setExpandedItems",
+    focusedItem: "setFocusedItem",
+  },
+
+  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();
+      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.applySubStateUpdate("expandedItems", (expandedItems) => [
+        ...expandedItems,
+        itemId,
+      ]);
+      instance.rebuildTree();
+    },
+
+    collapseItem: (itemId) => {
+      if (!instance.getItemInstance(itemId).isFolder()) {
+        return;
+      }
+
+      instance.applySubStateUpdate("expandedItems", (expandedItems) =>
+        expandedItems.filter((id) => id !== itemId)
+      );
+      instance.rebuildTree();
+    },
+
+    // TODO memo
+    getFocusedItem: () => {
+      return (
+        instance.getItemInstance(instance.getState().focusedItem ?? "") ??
+        instance.getItems()[0]
+      );
+    },
+
+    focusItem: (itemId) => {
+      instance.applySubStateUpdate("focusedItem", 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: () => {
+      // 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();
+      });
+    },
+
+    getContainerProps: () => ({
+      ...prev.getContainerProps?.(),
+      role: "tree",
+      ariaLabel: "",
+      ariaActivedescendant: "",
+    }),
+  }),
+
+  createItemInstance: (prev, item, tree) => ({
+    ...prev,
+    isLoading: () => {
+      throw new Error("No data-loader registered");
+    },
+    scrollTo: async (scrollIntoViewArg) => {
+      tree.getConfig().scrollToItem?.(item as any);
+      await poll(() => item.getElement() !== null, 20);
+      item.getElement()!.scrollIntoView(scrollIntoViewArg);
+    },
+    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: item.getMemoizedProp("tree/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()]
+    ),
+    // TODO remove
+    getIndexInParent: () => item.getItemMeta().posInSet,
+    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],
+    getMemoizedProp: (name, create, deps) => {
+      const data = item.getDataRef<TreeItemDataRef>();
+      const memoizedValue = data.current.memoizedValues?.[name];
+      if (
+        memoizedValue &&
+        (!deps ||
+          data.current.memoizedDeps?.[name]?.every((d, i) => d === deps![i]))
+      ) {
+        return memoizedValue;
+      }
+      data.current.memoizedDeps ??= {};
+      data.current.memoizedValues ??= {};
+      const value = create();
+      data.current.memoizedDeps[name] = deps;
+      data.current.memoizedValues[name] = value;
+      return value;
+    },
+  }),
+
+  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();
+        } 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,78 @@
+import { ItemInstance, SetStateFn, TreeInstance } from "../../types/core";
+
+export type ItemMeta = {
+  itemId: string;
+  parentId: string;
+  level: number;
+  index: number;
+  setSize: number;
+  posInSet: number;
+};
+
+export type TreeItemDataRef = {
+  memoizedValues: Record<string, any>;
+  memoizedDeps: Record<string, any[] | undefined>;
+};
+
+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;
+    updateDomFocus: () => 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;
+    getMemoizedProp: <X>(name: string, create: () => X, deps?: any[]) => X;
+    scrollTo: (
+      scrollIntoViewArg?: boolean | ScrollIntoViewOptions
+    ) => Promise<void>;
+  };
+  hotkeys:
+    | "focusNextItem"
+    | "focusPreviousItem"
+    | "expandOrDown"
+    | "collapseOrUp"
+    | "focusFirstItem"
+    | "focusLastItem";
+};