@gtkx/components 1.0.0-rc.3 → 1.0.0

package/src/internal/slots.ts

@@ -0,0 +1,67 @@
+import { decodePartAt, encodePart } from "./keys.js";
+
+type SlotKey = {
+    levelPath: string;
+    slot: number;
+};
+
+type SlotMap = Map<string, Set<number>>;
+
+function getLevelBoundary(path: string): number {
+    let offset = 0;
+    let boundary = 0;
+
+    while (offset < path.length) {
+        const part = decodePartAt(path, offset);
+
+        if (part === null) {
+            return boundary;
+        }
+
+        boundary = offset;
+        offset += encodePart(part).length;
+    }
+
+    return boundary;
+}
+
+function getSlotKey(path: string): SlotKey | null {
+    const boundary = getLevelBoundary(path);
+    const part = decodePartAt(path, boundary);
+
+    if (part === null) {
+        return null;
+    }
+
+    return { levelPath: path.slice(0, boundary), slot: Number(part) };
+}
+
+function trackPath(slots: SlotMap, path: string): void {
+    const key = getSlotKey(path);
+
+    if (key === null) {
+        return;
+    }
+
+    const level = slots.get(key.levelPath);
+
+    if (level === undefined) {
+        slots.set(key.levelPath, new Set([key.slot]));
+
+        return;
+    }
+
+    level.add(key.slot);
+}
+
+function trackPaths(paths: Iterable<string>): SlotMap {
+    const slots: SlotMap = new Map();
+
+    for (const path of paths) {
+        trackPath(slots, path);
+    }
+
+    return slots;
+}
+
+export { getSlotKey, trackPath, trackPaths, type SlotMap };

package/src/internal/tree-expansion.ts

@@ -0,0 +1,110 @@
+import type { CollectionIndex } from "./collection-index.js";
+import type { SlotMap } from "./slots.js";
+import type { VisibleOrder } from "./tree-order.js";
+import { encodePart } from "./keys.js";
+import { getSlotKey, trackPath, trackPaths } from "./slots.js";
+import { buildVisibleOrder } from "./tree-order.js";
+
+type TreeExpansion = {
+    index: CollectionIndex;
+    expanded: Set<string>;
+    slots: SlotMap;
+    order: VisibleOrder | null;
+    isApplying: boolean;
+    isSyncing: boolean;
+};
+
+function dropSubtree(expansion: TreeExpansion, path: string): void {
+    expansion.expanded.delete(path);
+    const level = expansion.slots.get(path);
+
+    if (level === undefined) {
+        return;
+    }
+
+    expansion.slots.delete(path);
+
+    for (const slot of level) {
+        dropSubtree(expansion, path + encodePart(String(slot)));
+    }
+}
+
+function createTreeExpansion(index: CollectionIndex): TreeExpansion {
+    return { index, expanded: new Set(), slots: new Map(), order: null, isApplying: false, isSyncing: false };
+}
+
+function orderFor(expansion: TreeExpansion): VisibleOrder {
+    expansion.order ??= buildVisibleOrder(expansion.index, expansion.slots);
+
+    return expansion.order;
+}
+
+function adoptOrder(expansion: TreeExpansion, order: VisibleOrder): void {
+    expansion.expanded = new Set(order.expandedPaths);
+    expansion.slots = trackPaths(order.expandedPaths);
+    expansion.order = order;
+}
+
+function prunePath(expansion: TreeExpansion, path: string): void {
+    const key = getSlotKey(path);
+
+    if (key !== null) {
+        expansion.slots.get(key.levelPath)?.delete(key.slot);
+    }
+
+    dropSubtree(expansion, path);
+    expansion.order = null;
+}
+
+function pruneSlots(expansion: TreeExpansion, levelPath: string, isPruned: (slot: number) => boolean): void {
+    const level = expansion.slots.get(levelPath);
+
+    if (level === undefined) {
+        return;
+    }
+
+    for (const slot of level) {
+        if (!isPruned(slot)) {
+            continue;
+        }
+
+        level.delete(slot);
+        dropSubtree(expansion, levelPath + encodePart(String(slot)));
+    }
+
+    expansion.order = null;
+}
+
+function markExpanded(expansion: TreeExpansion, path: string, isExpanded: boolean): void {
+    if (isExpanded) {
+        expansion.expanded.add(path);
+        trackPath(expansion.slots, path);
+        expansion.order = null;
+
+        return;
+    }
+
+    prunePath(expansion, path);
+}
+
+function resetExpansion(expansion: TreeExpansion): void {
+    expansion.expanded = new Set();
+    expansion.slots = new Map();
+    expansion.order = null;
+}
+
+function adoptIndex(expansion: TreeExpansion, index: CollectionIndex): void {
+    expansion.index = index;
+    expansion.order = null;
+}
+
+export {
+    adoptIndex,
+    adoptOrder,
+    createTreeExpansion,
+    markExpanded,
+    orderFor,
+    pruneSlots,
+    resetExpansion,
+    type TreeExpansion,
+};

package/src/internal/tree-order.ts

@@ -0,0 +1,138 @@
+import type { ListItem } from "../types.js";
+import type { CollectionIndex, Level } from "./collection-index.js";
+import type { SlotMap } from "./slots.js";
+import { encodePart } from "./keys.js";
+
+type VisibleRow = {
+    level: Level;
+    slot: number;
+    item: ListItem;
+    position: number;
+    isOpen: boolean;
+    isMarked: boolean;
+};
+
+type VisibleOrder = {
+    expandedPaths: string[];
+    expandedIds: string[];
+};
+
+type RowVisitor = (row: VisibleRow) => void;
+
+type WalkOptions = {
+    index: CollectionIndex;
+    slots: SlotMap;
+    marks?: SlotMap | undefined;
+    visit?: RowVisitor | undefined;
+};
+
+type WalkFrame = {
+    level: Level;
+    cursor: number;
+    open: Set<number> | undefined;
+    marked: Set<number> | undefined;
+};
+
+type WalkState = {
+    options: WalkOptions;
+    stack: WalkFrame[];
+    row: VisibleRow;
+    order: VisibleOrder;
+};
+
+const NO_LEVEL: Level = { path: "", items: [], expandableFlags: [] };
+const NO_ITEM: ListItem = { id: "", value: undefined };
+
+const getRowPath = (row: VisibleRow): string => row.level.path + encodePart(String(row.slot));
+
+function frameFor(options: WalkOptions, level: Level): WalkFrame {
+    return { level, cursor: 0, open: options.slots.get(level.path), marked: options.marks?.get(level.path) };
+}
+
+function descend(state: WalkState, path: string): void {
+    const child = state.options.index.children.get(path);
+
+    if (child === undefined || child.items.length === 0) {
+        return;
+    }
+
+    state.order.expandedPaths.push(path);
+    state.order.expandedIds.push(state.row.item.id);
+    state.stack.push(frameFor(state.options, child));
+}
+
+function visitSlot(state: WalkState, frame: WalkFrame, slot: number): void {
+    const item = frame.level.items[slot];
+
+    if (item === undefined) {
+        return;
+    }
+
+    const { row } = state;
+    row.level = frame.level;
+    row.slot = slot;
+    row.item = item;
+    row.isOpen = frame.open?.has(slot) ?? false;
+    row.isMarked = frame.marked?.has(slot) ?? false;
+    state.options.visit?.(row);
+    row.position += 1;
+
+    if (row.isOpen) {
+        descend(state, getRowPath(row));
+    }
+}
+
+function advanceFrame(state: WalkState): void {
+    const frame = state.stack.at(-1);
+
+    if (frame === undefined || frame.cursor >= frame.level.items.length) {
+        state.stack.pop();
+
+        return;
+    }
+
+    const slot = frame.cursor;
+    frame.cursor += 1;
+    visitSlot(state, frame, slot);
+}
+
+function walkVisible(options: WalkOptions): VisibleOrder {
+    const order: VisibleOrder = { expandedPaths: [], expandedIds: [] };
+    const row: VisibleRow = { level: NO_LEVEL, slot: 0, item: NO_ITEM, position: 0, isOpen: false, isMarked: false };
+    const frames = options.index.groups.map((level) => frameFor(options, level));
+    const state: WalkState = { options, stack: frames.toReversed(), row, order };
+
+    while (state.stack.length > 0) {
+        advanceFrame(state);
+    }
+
+    return order;
+}
+
+function buildVisibleOrder(index: CollectionIndex, slots: SlotMap): VisibleOrder {
+    return walkVisible({ index, slots });
+}
+
+function findPositions(index: CollectionIndex, slots: SlotMap, ids: Set<string>): number[] {
+    const found: number[] = [];
+
+    walkVisible({
+        index,
+        slots,
+        visit: (row) => {
+            if (ids.has(row.item.id)) {
+                found.push(row.position);
+            }
+        },
+    });
+
+    return found;
+}
+
+export {
+    buildVisibleOrder,
+    findPositions,
+    walkVisible,
+    type VisibleOrder,
+    type WalkOptions,
+};

package/src/internal/use-collection.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import { useLayoutEffect, useMemo, useState } from "react";
-import type { ExpansionProps, Item, Section, SelectionProps } from "../types.js";
+import type { ExpansionProps, ListItem, ListSection, SelectionProps } from "../types.js";
 import type { Collection } from "./collection.js";
 import { createCollectionIndex } from "./collection-index.js";
 import { createCollectionModel } from "./collection-model.js";
@@ -9,9 +9,9 @@ import { useExpansion } from "./expansion.js";
 import { useSelection } from "./selection.js";
 
 type CollectionDataOptions = {
-    items?: Item[] | undefined;
-    sections?: Section[] | undefined;
-    flat?: boolean | undefined;
+    items?: ListItem[] | undefined;
+    sections?: ListSection[] | undefined;
+    isFlat?: boolean | undefined;
 };
 
 type CollectionOptions = CollectionDataOptions & SelectionProps & ExpansionProps;
@@ -22,14 +22,14 @@ type CollectionResult = {
 };
 
 function useCollectionData(options: CollectionDataOptions): Collection {
-    const { items, sections, flat } = options;
-    const [gtk] = useState(createCollectionModel);
-    const index = useMemo(() => createCollectionIndex(items, sections, flat === true), [items, sections, flat]);
-    const collection = useMemo(() => createCollection(gtk, index), [gtk, index]);
+    const { items, sections, isFlat } = options;
+    const [collectionModel] = useState(createCollectionModel);
+    const index = useMemo(() => createCollectionIndex(items, sections, isFlat === true), [items, sections, isFlat]);
+    const collection = useMemo(() => createCollection(collectionModel, index), [collectionModel, index]);
 
     useLayoutEffect(() => {
-        gtk.sync(index);
-    }, [gtk, index]);
+        collectionModel.sync(index);
+    }, [collectionModel, index]);
 
     return collection;
 }
@@ -54,4 +54,4 @@ function useCollection(options: CollectionOptions): CollectionResult {
     return { collection, selection };
 }
 
-export { useCollection, useCollectionData, type CollectionDataOptions, type CollectionOptions };
+export { useCollection, useCollectionData };

package/src/list-view.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import { GtkListView, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
 import { omit } from "@gtkx/utils";
 import type { ListViewProps } from "./types.js";
-import { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from "./internal/cells.js";
+import { ItemPortals, useItemCells, useSectionHeader } from "./internal/cells.js";
 import { useCollection } from "./internal/use-collection.js";
 
 const LIST_VIEW_PROPS = [
@@ -15,6 +15,7 @@ const LIST_VIEW_PROPS = [
     "selectionMode",
     "expandedIds",
     "onExpandedChange",
+    "expanderDescriptions",
     "estimatedItemHeight",
     "estimatedItemWidth",
 ] as const satisfies (keyof ListViewProps)[];
@@ -24,27 +25,30 @@ const LIST_VIEW_PROPS = [
  * controlled selection, controlled tree expansion, and estimated item sizing.
  */
 function ListView<T = unknown, S = unknown>(props: ListViewProps<T, S>): ReactNode {
-    const { renderItem, renderHeader, expandedIds, estimatedItemHeight, estimatedItemWidth } = props;
+    const { renderItem, renderHeader, expandedIds, expanderDescriptions } = props;
+    const { estimatedItemHeight, estimatedItemWidth } = props;
     const rest = omit(props, LIST_VIEW_PROPS);
     const size = { width: estimatedItemWidth ?? -1, height: estimatedItemHeight ?? -1 };
     const { collection, selection } = useCollection(props);
     const itemCells = useItemCells(size);
-    const headerCells = useHeaderCells(size);
+    const header = useSectionHeader(renderHeader, collection, size);
 
     return (
         <>
             <GtkListView
                 model={selection}
                 factory={<GtkSignalListItemFactory {...itemCells.handlers} />}
-                {...(renderHeader != null && {
-                    headerFactory: <GtkSignalListItemFactory {...headerCells.handlers} />,
-                })}
+                {...header.factoryProps}
                 {...rest}
             />
-            <ItemPortals store={itemCells} render={renderItem} collection={collection} expandedIds={expandedIds} />
-            {renderHeader != null && (
-                <HeaderPortals store={headerCells} render={renderHeader} collection={collection} />
-            )}
+            <ItemPortals
+                registry={itemCells}
+                render={renderItem}
+                collection={collection}
+                expandedIds={expandedIds}
+                expanderDescriptions={expanderDescriptions}
+            />
+            {header.portals}
         </>
     );
 }