@1771technologies/lytenyte-pro 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/cells/cell.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useEffect, useState } from "react";
 import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
 import { useGridRoot } from "../context";
-import { CellReact } from "@1771technologies/lytenyte-shared";
+import { CellReact, GROUP_COLUMN_SINGLE_ID } from "@1771technologies/lytenyte-shared";
 import { CellDefault } from "./cell-default";
 import { CellEditor } from "./cell-editor";
 import { useRowMeta } from "../rows/row/context";
@@ -33,6 +33,8 @@ const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarde
     const rowMeta = useRowMeta();
     if (!row)
         return null;
+    if (cell.column.id === GROUP_COLUMN_SINGLE_ID)
+        console.log(cell.row.get());
     return (_jsxs(CellReact, { ...props, ref: forwarded, cell: cell, isEditing: isEditing, viewportWidth: cx.viewportWidthInner.useValue(), detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), rtl: cx.rtl.useValue(), xPosition: cx.xPositions.useValue(), yPosition: cx.yPositions.useValue(), children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(_Fragment, { children: typeof Renderer === "function" ? (_jsx(Renderer, { column: cell.column, rowSelected: rowMeta.selected, rowIndeterminate: rowMeta.indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin })) : (Renderer) }))] }));
 });
 export const Cell = fastDeepMemo(CellImpl);

package/dist/column-manager/branch.d.ts

@@ -1,9 +1,15 @@
-import type { TreeVirtualBranch } from "../tree-view/virtualized/make-virtual-tree";
+import type { CSSProperties } from "react";
 import type { Column } from "../+types";
 import type { SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
 export interface ColumnManagerBranchProps {
-    readonly item: TreeVirtualBranch<Column<any>>;
+    readonly item: PathBranch<Column<any>>;
     readonly label: SlotComponent;
-    readonly expander?: SlotComponent;
+    readonly expander?: SlotComponent<{
+        expanded: boolean;
+        toggle: () => void;
+    }>;
+    readonly labelWrapClassName?: string;
+    readonly labelWrapStyle?: CSSProperties;
 }
 export declare const Branch: import("react").ForwardRefExoticComponent<Omit<ColumnManagerBranchProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/column-manager/branch.js

@@ -5,7 +5,7 @@ import { ColumnItemContext } from "./context";
 import { dragState, DropWrap } from "@1771technologies/lytenyte-dragon";
 import { useGrid } from "../grid-provider/use-grid";
 import { useColumnsFromContext } from "./use-columns-from-context";
-export const Branch = forwardRef(function Branch({ item, label, ...props }, forwarded) {
+export const Branch = forwardRef(function Branch({ item, label, labelWrapClassName, labelWrapStyle, ...props }, forwarded) {
     const grid = useGrid();
     const id = grid.state.gridId.useValue();
     const accepted = `${id}/columns`;
@@ -19,13 +19,13 @@ export const Branch = forwardRef(function Branch({ item, label, ...props }, forw
         const next = s ?? isVisible;
         grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
     }, [columns, grid.api, isVisible]);
-    return (_jsx(ColumnItemContext, { value: useMemo(() => ({ item }), [item]), children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.idOccurrence, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
+    return (_jsx(ColumnItemContext, { value: useMemo(() => ({ item }), [item]), children: _jsx(TreeBranch, { ...props, itemId: item.data.idOccurrence, ref: forwarded, onKeyDown: (ev) => {
                 props.onKeyDown?.(ev);
                 if (ev.key === " ") {
                     toggle();
                     ev.preventDefault();
                 }
-            }, labelWrap: _jsx(DropWrap, { "data-ln-column-manager-branch": true, "data-ln-column-id": item.branch.data.idOccurrence, accepted: [accepted], onEnter: (el) => {
+            }, labelWrap: _jsx(DropWrap, { "data-ln-column-manager-branch": true, "data-ln-column-id": item.data.idOccurrence, accepted: [accepted], className: labelWrapClassName, style: labelWrapStyle, onEnter: (el) => {
                     const data = dragState.data
                         .get()
                         ?.siteLocalData?.[accepted]?.at(-1);

package/dist/column-manager/column-manager.d.ts

@@ -1,15 +1,13 @@
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
 import { Root } from "./root";
 import { useColumnManager } from "./use-column-manager";
 import { VisibilityCheckbox } from "./visibility-checkbox";
 export declare const ColumnManager: {
     Root: typeof Root;
-    Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
-    PassiveScroll: typeof ForceSyncScrolling;
     Leaf: import("react").ForwardRefExoticComponent<Omit<import("./leaf").ColumnManagerLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
-    Branch: import("react").ForwardRefExoticComponent<Omit<import("./branch").ColumnManagerBranchProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./label").LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    VisibilityCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & VisibilityCheckbox, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Branch: import("react").ForwardRefExoticComponent<Omit<import("./branch").ColumnManagerBranchProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
     MoveHandle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./move-handle").MoveHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    VisibilityCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & VisibilityCheckbox, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     useColumnManager: typeof useColumnManager;
 };

package/dist/column-manager/column-manager.js

@@ -1,20 +1,18 @@
-import { TreePanel } from "../tree-view/panel/panel";
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
 import { Branch } from "./branch";
 import { Label } from "./label";
 import { Leaf } from "./leaf";
 import { MoveHandle } from "./move-handle";
+import { Panel } from "./panel";
 import { Root } from "./root";
 import { useColumnManager } from "./use-column-manager";
 import { VisibilityCheckbox } from "./visibility-checkbox";
 export const ColumnManager = {
-    Root: Root,
-    Panel: TreePanel,
-    PassiveScroll: ForceSyncScrolling,
+    Root,
     Leaf,
-    Branch,
     Label,
-    VisibilityCheckbox,
+    Branch,
+    Panel,
     MoveHandle,
-    useColumnManager,
+    VisibilityCheckbox,
+    useColumnManager: useColumnManager,
 };

package/dist/column-manager/context.d.ts

@@ -1,7 +1,7 @@
-import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree";
 import type { Column } from "../+types";
+import type { PathBranch, PathLeaf } from "@1771technologies/lytenyte-shared";
 export interface TreeItemContextValue {
-    readonly item: TreeVirtualItem<Column<any>>;
+    readonly item: PathBranch<Column<any>> | PathLeaf<Column<any>>;
 }
 export declare const ColumnItemContext: import("react").Context<TreeItemContextValue>;
 export declare const useColumnItemContext: () => TreeItemContextValue;

package/dist/column-manager/label.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
-import { useColumnItemContext } from "./context";
 import { forwardRef, useMemo } from "react";
+import { useColumnItemContext } from "./context";
 export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     const label = useMemo(() => {
         if (item.kind == "branch")
-            return item.branch.id.split("#").at(-2);
-        return item.leaf.data.name ?? item.leaf.data.id;
+            return item.id.split("#").at(-2);
+        return item.data.name ?? item.data.id;
     }, [item]);
     const rendered = useSlot({
         props: [{ children: label }, props],

package/dist/column-manager/leaf.d.ts

@@ -1,6 +1,6 @@
-import type { TreeVirtualLeaf } from "../tree-view/virtualized/make-virtual-tree";
 import type { Column } from "../+types";
+import type { PathLeaf } from "@1771technologies/lytenyte-shared";
 export interface ColumnManagerLeafProps {
-    readonly item: TreeVirtualLeaf<Column<any>>;
+    readonly item: PathLeaf<Column<any>>;
 }
 export declare const Leaf: import("react").ForwardRefExoticComponent<Omit<ColumnManagerLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/column-manager/leaf.js

@@ -28,7 +28,7 @@ export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, fo
                     ?.siteLocalData?.[accepted]?.at(-1);
                 if (!data)
                     return;
-                const columns = [item.leaf.data];
+                const columns = [item.data];
                 const move = data.id;
                 if (columns.some((c) => c.id === move))
                     return;
@@ -48,11 +48,11 @@ export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, fo
             }, onLeave: (el) => {
                 el.removeAttribute("data-ln-is-before");
                 el.removeAttribute("data-ln-is-after");
-            }, as: _jsx(TreeLeaf, { ...props, itemId: item.leaf.data.id, ref: forwarded, ...item.attrs, style: { ...props.style, ...item.attrs.style }, onKeyDown: (ev) => {
+            }, as: _jsx(TreeLeaf, { ...props, itemId: item.data.id, ref: forwarded, onKeyDown: (ev) => {
                     props.onKeyDown?.(ev);
                     if (ev.key === " ") {
                         toggle();
                         ev.preventDefault();
                     }
-                }, "data-ln-column-manager-leaf": true, "data-ln-column-id": item.leaf.data.id }) }) }));
+                }, "data-ln-column-manager-leaf": true, "data-ln-column-id": item.data.id }) }) }));
 });

package/dist/column-manager/move-handle.d.ts

@@ -1,12 +1,12 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import { type ReactNode } from "react";
 import type { Column } from "../+types";
-import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree";
+import type { PathBranch, PathLeaf } from "@1771technologies/lytenyte-shared";
 export interface MoveHandleProps {
     readonly as?: SlotComponent;
     readonly placeholder?: (p: {
         columns: Column<any>[];
-        item: TreeVirtualItem<Column<any>>;
+        item: PathBranch<Column<any>> | PathLeaf<Column<any>>;
     }) => ReactNode;
 }
 export declare const MoveHandle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & MoveHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/column-manager/move-handle.js

@@ -42,9 +42,7 @@ export const MoveHandle = forwardRef(function MoveHandle({ as, placeholder: Plac
         placeholder: () => {
             if (Placeholder)
                 return _jsx(Placeholder, { columns: columns, item: item });
-            return (_jsx("div", { children: item.kind === "branch"
-                    ? item.branch.data.joinPath.at(-1)
-                    : (item.leaf.data.name ?? item.leaf.data.id) }));
+            return (_jsx("div", { children: item.kind === "branch" ? item.data.joinPath.at(-1) : (item.data.name ?? item.data.id) }));
         },
     });
     const combined = useCombinedRefs(ref, forwarded);

package/dist/column-manager/panel.d.ts

@@ -0,0 +1 @@
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

package/dist/column-manager/panel.js

@@ -0,0 +1,2 @@
+import { TreePanel } from "../tree-view/panel/panel";
+export const Panel = TreePanel;

package/dist/column-manager/root.d.ts

@@ -1,9 +1,8 @@
-import { type PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 import type { Column, Grid } from "../+types";
-import type { UseColumnManagerReturn } from "./use-column-manager";
-import type { PathRoot } from "@1771technologies/lytenyte-shared";
-export type ColumnManagerRootProps<T> = UseColumnManagerReturn<T>["rootProps"] & {
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface ColumnManagerRootProps<T> {
     readonly grid: Grid<T>;
-    readonly root: PathRoot<Column<any>>;
-};
-export declare function Root<T>({ grid, children, treeRef, root, ...rootProps }: PropsWithChildren<ColumnManagerRootProps<T>>): import("react/jsx-runtime").JSX.Element;
+    readonly lookup: Record<string, PathBranch<Column<any>>>;
+}
+export declare function Root<T>({ grid, lookup, children }: PropsWithChildren<ColumnManagerRootProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/column-manager/root.js

@@ -1,20 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { GridProvider } from "../grid-provider/provider";
 import { TreeRoot } from "../tree-view/root";
 import { branchLookupContext } from "./branch-lookup-context";
-export function Root({ grid, children, treeRef, root, ...rootProps }) {
-    const branchLookup = useMemo(() => {
-        const stack = [...root.children.values()];
-        const lookup = {};
-        while (stack.length) {
-            const item = stack.pop();
-            if (item.kind === "leaf")
-                continue;
-            lookup[item.data.idOccurrence] = item;
-            stack.push(...item.children.values());
-        }
-        return lookup;
-    }, [root.children]);
-    return (_jsx(branchLookupContext.Provider, { value: branchLookup, children: _jsx(GridProvider, { value: grid, children: _jsx(TreeRoot, { selectMode: "none", transitionEnter: 200, transitionExit: 200, expansionDefault: true, ref: treeRef, ...rootProps, children: children }) }) }));
+export function Root({ grid, lookup, children }) {
+    return (_jsx(branchLookupContext.Provider, { value: lookup, children: _jsx(GridProvider, { value: grid, children: _jsx(TreeRoot, { children: children }) }) }));
 }

package/dist/column-manager/use-column-manager.d.ts

@@ -1,23 +1,9 @@
-import { type Dispatch, type JSX, type SetStateAction } from "react";
-import type { Column, Grid } from "../+types.js";
-import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree.js";
-import type { PathRoot } from "@1771technologies/lytenyte-shared";
-export interface UseColumnManagerReturn<T> {
-    readonly rootProps: {
-        readonly grid: Grid<T>;
-        readonly expansions: Record<string, boolean>;
-        readonly onExpansionChange: Dispatch<SetStateAction<Record<string, boolean>>>;
-        readonly treeRef: (el: HTMLElement | null) => void;
-        readonly getAllIds: () => Set<string>;
-        readonly getIdsBetweenNodes: (left: HTMLElement, right: HTMLElement) => string[];
-        readonly onFocusChange: (el: HTMLElement | null) => void;
-        readonly root: PathRoot<Column<T>>;
-    };
-    readonly tree: TreeVirtualItem<Column<T>>[];
-    readonly spacer: JSX.Element;
-}
-export interface UseColumnManagerArgs<T> {
+import type { Column, Grid } from "../+types";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface UseColumnManagerProps<T> {
     readonly grid: Grid<T>;
-    readonly itemHeight?: number;
 }
-export declare function useColumnManager<T>({ grid, itemHeight, }: UseColumnManagerArgs<T>): UseColumnManagerReturn<T>;
+export declare function useColumnManager<T>({ grid }: UseColumnManagerProps<T>): {
+    items: (PathBranch<Column<T>> | import("@1771technologies/lytenyte-shared").PathLeaf<Column<T>>)[];
+    lookup: Record<string, PathBranch<Column<any>>>;
+};

package/dist/column-manager/use-column-manager.js

@@ -1,24 +1,20 @@
-import { useState } from "react";
-import { useVirtualizedTree } from "../tree-view/virtualized/use-virtualized-tree.js";
-export function useColumnManager({ grid, itemHeight = 24, }) {
-    const [expansions, onExpansionChange] = useState({});
+import { useMemo } from "react";
+import { useTreeViewPaths } from "../tree-view/hooks/use-tree-view-paths";
+export function useColumnManager({ grid }) {
     const columns = grid.state.columns.useValue();
-    const virt = useVirtualizedTree({
-        paths: columns,
-        expansions,
-        itemHeight,
-        expansionDefault: true,
-        nonAdjacentPathTrees: true,
-    });
-    return {
-        rootProps: {
-            grid,
-            expansions,
-            onExpansionChange,
-            treeRef: virt.ref,
-            ...virt.rootProps,
-        },
-        spacer: virt.spacer,
-        tree: virt.virtualTree,
-    };
+    const items = useTreeViewPaths(columns, true);
+    console.log(items);
+    const branchLookup = useMemo(() => {
+        const stack = [...items];
+        const lookup = {};
+        while (stack.length) {
+            const item = stack.pop();
+            if (item.kind === "leaf")
+                continue;
+            lookup[item.data.idOccurrence] = item;
+            stack.push(...item.children.values());
+        }
+        return lookup;
+    }, [items]);
+    return { items, lookup: branchLookup };
 }

package/dist/column-manager/use-columns-from-context.d.ts

@@ -1,3 +1,3 @@
-import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree.js";
 import type { Column } from "../+types.js";
-export declare function useColumnsFromContext(item: TreeVirtualItem<Column<any>>): Column<any>[];
+import type { PathBranch, PathLeaf } from "@1771technologies/lytenyte-shared";
+export declare function useColumnsFromContext<T>(item: PathBranch<Column<T>> | PathLeaf<Column<T>>): Column<any>[] | Column<T>[];

package/dist/column-manager/use-columns-from-context.js

@@ -5,7 +5,7 @@ export function useColumnsFromContext(item) {
     const columns = useMemo(() => {
         if (item.kind === "branch") {
             const allChildren = [];
-            const branch = lookup[item.branch.data.idOccurrence];
+            const branch = lookup[item.data.idOccurrence];
             const stack = [...branch.children.values()];
             while (stack.length) {
                 const p = stack.pop();
@@ -17,7 +17,7 @@ export function useColumnsFromContext(item) {
             }
             return allChildren;
         }
-        return [item.leaf.data];
+        return [item.data];
     }, [item, lookup]);
     return columns;
 }

package/dist/filter-tree/branch.js

@@ -14,7 +14,7 @@ export const Branch = forwardRef(function Branch({ item, labelWrap, label, ...pr
             },
         ],
     });
-    return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.idOccurrence, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
+    return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.id, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
                 if (ev.key === " ")
                     value.onCheckChange();
             }, label: label, labelWrap: labelSlot }) }));

package/dist/filter-tree/root.js

@@ -26,5 +26,5 @@ export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, e
         return loadingSlot;
     if (error)
         return errorSlot;
-    return (_jsx(GridProvider, { value: grid, children: _jsx(FilterTreeContext.Provider, { value: value, children: _jsx(TreeRoot, { selectMode: "none", transitionEnter: 200, transitionExit: 200, expansionDefault: true, ref: treeRef, ...rootProps, children: children }) }) }));
+    return (_jsx(GridProvider, { value: grid, children: _jsx(FilterTreeContext.Provider, { value: value, children: _jsx(TreeRoot, { selectMode: "none", transitionEnter: 0, transitionExit: 0, expansionDefault: true, ref: treeRef, ...rootProps, children: children }) }) }));
 }

package/dist/row-data-source-server/use-server-data-source.js

@@ -453,6 +453,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             return { kind: "leaf", data: null, id: `error-${ri}`, loading: false, error };
         if (!node)
             return { kind: "leaf", data: null, id: `loading-${ri}`, loading: true, error: null };
+        const isLoading = rdsStore.get(loadingGroups$);
         if (node.kind === "parent") {
             return {
                 kind: "branch",
@@ -461,6 +462,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
                 key: node.path,
                 depth: getNodeDepth(node),
                 error,
+                loading: isLoading.has(node.data.id),
             };
         }
         return {
@@ -470,13 +472,19 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             error,
         };
     };
+    const loadingGroups$ = atom(new Set());
     const rowExpand = (p) => {
         const f = flat.get();
+        const loadingRows = new Set(rdsStore.get(loadingGroups$));
+        const rowsForThis = new Set();
         const rowIndices = [];
         const requests = Object.entries(p)
             .map(([rowId, state]) => {
             if (!state)
                 return null;
+            // Mark as loading
+            loadingRows.add(rowId);
+            rowsForThis.add(rowId);
             const rowIndex = rowToIndex(rowId);
             if (rowIndex == null)
                 return null;
@@ -505,17 +513,26 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
                 return prev;
             });
         }
+        // Mark these groups as loading
+        rdsStore.set(loadingGroups$, loadingRows);
+        grid?.state.rowDataStore.rowClearCache();
         dataRequestHandler(requests, false, () => {
             if (mode)
                 grid?.state.columnPivotColumnGroupExpansions.set((prev) => ({ ...prev, ...p }));
             else
                 grid?.state.rowGroupExpansions.set((prev) => ({ ...prev, ...p }));
+            const next = new Set(rdsStore.get(loadingGroups$));
+            rowsForThis.forEach((c) => next.delete(c));
+            grid?.state.rowDataStore.rowClearCache();
         }, (error) => {
             rdsStore.set(nodesWithError, (prev) => {
                 const n = new Map(prev);
                 rowIndices.forEach((c) => n.set(c, error));
                 return prev;
             });
+            const next = new Set(rdsStore.get(loadingGroups$));
+            rowsForThis.forEach((c) => next.delete(c));
+            grid?.state.rowDataStore.rowClearCache();
         });
     };
     const rowToIndex = (rowId) => {

package/dist/tree-view/branch/branch.d.ts

@@ -3,7 +3,10 @@ export interface TreeBranchProps {
     readonly itemId: string;
     readonly labelWrap?: SlotComponent;
     readonly label?: SlotComponent;
-    readonly expander?: SlotComponent;
+    readonly expander?: SlotComponent<{
+        expanded: boolean;
+        toggle: () => void;
+    }>;
     readonly transitionEnterMs?: number;
     readonly transitionExitMs?: number;
     readonly gridWrapped?: boolean;

package/dist/tree-view/branch/branch.js

@@ -31,7 +31,8 @@ export const TreeBranch = forwardRef(function TreeBranch({ itemId, label, expand
         slot: label ?? _jsx("div", {}),
     });
     const expandedProps = {
-        onClick: () => {
+        onClick: (e) => {
+            e.stopPropagation();
             onExpansionChange(!expanded);
         },
     };
@@ -51,7 +52,7 @@ export const TreeBranch = forwardRef(function TreeBranch({ itemId, label, expand
     });
     return (_jsx(depthContext.Provider, { value: depth + 1, children: _jsxs("li", { ...props, onKeyDown: useBranchKeys(itemId, root.expansionDefault ?? false, props.onKeyDown), tabIndex: -1, ref: forwarded, role: "treeitem", "aria-expanded": open, "aria-selected": root.selection.has(itemId), "aria-level": depth + 1, "data-ln-selected": root.selection.has(itemId), "data-ln-tree-node": true, "data-ln-tree-branch": true, "data-ln-tree-id": itemId, style: {
                 ...props.style,
-                "--tree-depth": depth,
+                "--ln-tree-depth": depth,
             }, children: [labelWrapSlot, _jsx("div", { children: _jsx(Wrapped, { wrapped: wrapped, expanded: open, children: shouldMount && (_jsx("ul", { "data-tree-branch-children": true, "data-expanded": open, "data-open-state": state, role: "group", children: props.children })) }) })] }) }));
 });
 function Wrapped(props) {

package/dist/tree-view/hooks/use-tree-view-paths.d.ts

@@ -1,2 +1,2 @@
 import { type PathProvidedItem } from "@1771technologies/lytenyte-shared";
-export declare function useTreeViewPaths<T extends PathProvidedItem>(paths: T[]): (import("@1771technologies/lytenyte-shared").PathBranch<T> | import("@1771technologies/lytenyte-shared").PathLeaf<T>)[];
+export declare function useTreeViewPaths<T extends PathProvidedItem>(paths: T[], nonAdjacentAreDistinct?: boolean): (import("@1771technologies/lytenyte-shared").PathBranch<T> | import("@1771technologies/lytenyte-shared").PathLeaf<T>)[];

package/dist/tree-view/hooks/use-tree-view-paths.js

@@ -1,9 +1,9 @@
 import { computePathTree } from "@1771technologies/lytenyte-shared";
 import { useMemo } from "react";
-export function useTreeViewPaths(paths) {
+export function useTreeViewPaths(paths, nonAdjacentAreDistinct) {
     const tree = useMemo(() => {
-        const result = computePathTree(paths);
+        const result = computePathTree(paths, {}, nonAdjacentAreDistinct);
         return [...result.children.values()];
-    }, [paths]);
+    }, [nonAdjacentAreDistinct, paths]);
     return tree;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -49,12 +49,12 @@
   },
   "dependencies": {
     "@1771technologies/atom": "^1.0.2",
-    "@1771technologies/lytenyte-dom-utils": "1.0.0-beta.29",
-    "@1771technologies/lytenyte-core": "1.0.0-beta.29",
-    "@1771technologies/lytenyte-dragon": "1.0.0-beta.29",
-    "@1771technologies/lytenyte-react-hooks": "1.0.0-beta.29",
-    "@1771technologies/lytenyte-shared": "1.0.0-beta.29",
-    "@1771technologies/lytenyte-js-utils": "1.0.0-beta.29"
+    "@1771technologies/lytenyte-dom-utils": "1.0.0-beta.30",
+    "@1771technologies/lytenyte-js-utils": "1.0.0-beta.30",
+    "@1771technologies/lytenyte-dragon": "1.0.0-beta.30",
+    "@1771technologies/lytenyte-shared": "1.0.0-beta.30",
+    "@1771technologies/lytenyte-react-hooks": "1.0.0-beta.30",
+    "@1771technologies/lytenyte-core": "1.0.0-beta.30"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/column-manager/passive-scroll.d.ts

@@ -1,2 +0,0 @@
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
-export declare const ColumnManagerPassiveScroll: typeof ForceSyncScrolling;

package/dist/column-manager/passive-scroll.js

@@ -1,2 +0,0 @@
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
-export const ColumnManagerPassiveScroll = ForceSyncScrolling;