@1771technologies/lytenyte-pro 1.0.0-beta.9 → 1.0.1

package/dist/cell-selection/update-additive-cell-selection.js

@@ -7,7 +7,6 @@ export function updateAdditiveCellSelection(grid, rect) {
     const ds = grid.state.rowDataStore;
     const rowTopCount = ds.rowTopCount.get();
     const adjustedRect = adjustRectForRowAndCellSpan(grid, rect);
-    console.log(adjustedRect);
     const rects = splitCellSelectionRect({
         rect: boundSelectionRect(grid, adjustedRect),
         colCenterCount: s.columnVisibleCenterCount,
@@ -15,7 +14,6 @@ export function updateAdditiveCellSelection(grid, rect) {
         rowCenterCount: ds.rowCenterCount.get(),
         rowTopCount: rowTopCount,
     });
-    console.log(rects);
     const current = grid.internal.cellSelectionAdditiveRects.get();
     if (current && current.length === rects.length) {
         if (current.every((c, i) => areRectsEqual(c, rects[i])))

package/dist/cells/cell-editor.js

@@ -34,6 +34,13 @@ export function CellEditor({ cell }) {
             }
             if (e.key === "Enter") {
                 const ds = grid.state.rowDataStore;
+                // Don't move if the there are validation errors.
+                const editValidation = grid.internal.editValidation.get();
+                if (typeof editValidation === "boolean"
+                    ? editValidation === false
+                    : Object.keys(editValidation).length >= 1) {
+                    return;
+                }
                 handleNavigationKeys({
                     ctrlKey: false,
                     metaKey: false,
@@ -81,12 +88,12 @@ function EditRenderer({ cell }) {
     if (!editRenderer) {
         const type = column.type;
         if (type === "number")
-            return (_jsx("input", { type: "number", value: value, onChange: (e) => onChange(Number.parseFloat(e.target.value)) }));
+            return (_jsx("input", { type: "number", value: value ?? "", onChange: (e) => (e.target.value ? onChange(Number.parseFloat(e.target.value)) : 0) }));
         if (type === "date")
-            return _jsx("input", { type: "date", value: value, onChange: (e) => onChange(e.target.value) });
+            return _jsx("input", { type: "date", value: value ?? "", onChange: (e) => onChange(e.target.value) });
         if (type === "datetime")
-            return (_jsx("input", { type: "datetime-local", value: value, onChange: (e) => onChange(e.target.value) }));
-        return _jsx("input", { value: value, onChange: (e) => onChange(e.target.value) });
+            return (_jsx("input", { type: "datetime-local", value: value ?? "", onChange: (e) => onChange(e.target.value) }));
+        return _jsx("input", { value: value ?? "", onChange: (e) => onChange(e.target.value) });
     }
     const Renderer = typeof editRenderer === "string" ? editFuncs[editRenderer] : editRenderer;
     const validation = ctx.grid.internal.editValidation.useValue();

package/dist/cells/cell.js

@@ -33,6 +33,6 @@ const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarde
     const rowMeta = useRowMeta();
     if (!row)
         return null;
-    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 })) : (Renderer) }))] }));
+    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

@@ -1,16 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import { TreeBranch } from "../tree-view/branch/branch";
 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`;
+    const base = grid.state.columnBase.useValue();
     const columns = useColumnsFromContext(item);
-    return (_jsx(ColumnItemContext, { value: useMemo(() => ({ item }), [item]), children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.idOccurrence, ref: forwarded, ...item.attrs, labelWrap: _jsx(DropWrap, { "data-ln-column-manager-branch": true, "data-ln-column-id": item.branch.data.idOccurrence, accepted: [accepted], onEnter: (el) => {
+    const isVisible = useMemo(() => {
+        const allVisible = columns.every((c) => !(c.hide ?? base.hide));
+        return allVisible;
+    }, [base.hide, columns]);
+    const toggle = useCallback((s) => {
+        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.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.data.idOccurrence, accepted: [accepted], className: labelWrapClassName, style: labelWrapStyle, onEnter: (el) => {
                     const data = dragState.data
                         .get()
                         ?.siteLocalData?.[accepted]?.at(-1);
@@ -25,7 +40,8 @@ export const Branch = forwardRef(function Branch({ item, label, ...props }, forw
                         return;
                     const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
                     const isBefore = thisIndex > moveIndex;
-                    if (isBefore) {
+                    // Flipped since our source is the one moving
+                    if (!isBefore) {
                         el.setAttribute("data-ln-is-before", "true");
                     }
                     else {

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.d.ts

@@ -1,5 +1,5 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface LabelProps {
-    readonly slot?: SlotComponent;
+    readonly as?: SlotComponent;
 }
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/column-manager/label.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
-import { useColumnItemContext } from "./context";
 import { forwardRef, useMemo } from "react";
-export const Label = forwardRef(function Label({ slot, ...props }, forwarded) {
+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],
         ref: forwarded,
-        slot: slot ?? _jsx("div", {}),
+        slot: as ?? _jsx("div", {}),
     });
     return rendered;
 });

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import { ColumnItemContext } from "./context";
 import { TreeLeaf } from "../tree-view/leaf";
 import { dragState, DropWrap } from "@1771technologies/lytenyte-dragon";
 import { useGrid } from "../grid-provider/use-grid";
+import { useColumnsFromContext } from "./use-columns-from-context";
 export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, forwarded) {
     const context = useMemo(() => {
         return { item: item };
@@ -11,13 +12,23 @@ export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, fo
     const grid = useGrid();
     const id = grid.state.gridId.useValue();
     const accepted = `${id}/columns`;
+    const base = grid.state.columnBase.useValue();
+    const columns = useColumnsFromContext(item);
+    const isVisible = useMemo(() => {
+        const allVisible = columns.every((c) => !(c.hide ?? base.hide));
+        return allVisible;
+    }, [base.hide, columns]);
+    const toggle = useCallback((s) => {
+        const next = s ?? isVisible;
+        grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
+    }, [columns, grid.api, isVisible]);
     return (_jsx(ColumnItemContext.Provider, { value: context, children: _jsx(DropWrap, { accepted: [accepted], onEnter: (el) => {
                 const data = dragState.data
                     .get()
                     ?.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;
@@ -27,7 +38,8 @@ export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, fo
                     return;
                 const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
                 const isBefore = thisIndex > moveIndex;
-                if (isBefore) {
+                // Flipped since our source is the one moving
+                if (!isBefore) {
                     el.setAttribute("data-ln-is-before", "true");
                 }
                 else {
@@ -36,5 +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 }, "data-ln-column-manager-leaf": true, "data-ln-column-id": item.leaf.data.id }) }) }));
+            }, 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.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 slot?: SlotComponent;
+    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

@@ -5,7 +5,7 @@ import { forwardRef, useMemo } from "react";
 import { useColumnItemContext } from "./context";
 import { useColumnsFromContext } from "./use-columns-from-context";
 import { useGrid } from "../grid-provider/use-grid";
-export const MoveHandle = forwardRef(function MoveHandle({ slot, placeholder: Placeholder, ...props }, forwarded) {
+export const MoveHandle = forwardRef(function MoveHandle({ as, placeholder: Placeholder, ...props }, forwarded) {
     const item = useColumnItemContext().item;
     const grid = useGrid();
     const columns = useColumnsFromContext(item);
@@ -42,9 +42,7 @@ export const MoveHandle = forwardRef(function MoveHandle({ slot, placeholder: Pl
         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);
@@ -52,7 +50,7 @@ export const MoveHandle = forwardRef(function MoveHandle({ slot, placeholder: Pl
     const renderer = useSlot({
         props: [{ "aria-label": "Drag to move column" }, additionalProps, props],
         ref: isMovable ? combined : forwarded,
-        slot: slot ?? _jsx("div", {}),
+        slot: as ?? _jsx("div", {}),
     });
     return renderer;
 });

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: "multiple", 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,19 +1,10 @@
-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;
+import type { Column, Grid } from "../+types";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface UseColumnManagerProps<T> {
+    readonly grid: Grid<T>;
+    readonly query?: string;
 }
-export declare function useColumnManager<T>(grid: Grid<T>): UseColumnManagerReturn<T>;
+export declare function useColumnManager<T>({ grid, query }: 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,24 @@
-import { useState } from "react";
-import { useVirtualizedTree } from "../tree-view/virtualized/use-virtualized-tree.js";
-export function useColumnManager(grid) {
-    const [expansions, onExpansionChange] = useState({});
+import { useMemo } from "react";
+import { useTreeViewPaths } from "../tree-view/hooks/use-tree-view-paths";
+export function useColumnManager({ grid, query }) {
     const columns = grid.state.columns.useValue();
-    const virt = useVirtualizedTree({
-        paths: columns,
-        expansions,
-        itemHeight: 24,
-        expansionDefault: true,
-        nonAdjacentPathTrees: true,
-    });
-    return {
-        rootProps: {
-            grid,
-            expansions,
-            onExpansionChange,
-            treeRef: virt.ref,
-            ...virt.rootProps,
-        },
-        spacer: virt.spacer,
-        tree: virt.virtualTree,
-    };
+    const filteredColumns = useMemo(() => {
+        if (!query)
+            return columns;
+        return columns.filter((c) => (c.name ?? c.id).toLowerCase().includes(query));
+    }, [columns, query]);
+    const items = useTreeViewPaths(filteredColumns, true);
+    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/column-manager/visibility-checkbox.d.ts

@@ -1,6 +1,6 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface VisibilityCheckbox {
-    readonly slot?: SlotComponent<{
+    readonly as?: SlotComponent<{
         visible: boolean;
         indeterminate: boolean;
         toggle: (s?: boolean) => void;

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

@@ -4,7 +4,7 @@ import { useColumnItemContext } from "./context";
 import { forwardRef, useCallback, useMemo } from "react";
 import { useGrid } from "../grid-provider/use-grid";
 import { useColumnsFromContext } from "./use-columns-from-context";
-export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ slot, ...props }, forwarded) {
+export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     const grid = useGrid();
     const base = grid.state.columnBase.useValue();
@@ -21,7 +21,7 @@ export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ slot,
     const rendered = useSlot({
         props: [props],
         ref: forwarded,
-        slot: slot ?? (_jsx("input", { type: "checkbox", checked: isVisible, "aria-label": "visibility toggle", onChange: () => {
+        slot: as ?? (_jsx("input", { type: "checkbox", checked: isVisible, "aria-label": "visibility toggle", onChange: () => {
                 toggle();
             } })),
         state: { visible: isVisible, indeterminate: isIndeterminate, toggle },

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

@@ -5,6 +5,9 @@ export interface FilterTreeBranch {
     readonly item: TreeVirtualBranch<FilterInFilterItem>;
     readonly label: SlotComponent;
     readonly labelWrap?: SlotComponent;
-    readonly expander?: SlotComponent;
+    readonly expander?: SlotComponent<{
+        expanded: boolean;
+        toggle: () => void;
+    }>;
 }
 export declare const Branch: import("react").ForwardRefExoticComponent<Omit<FilterTreeBranch & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

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/inclusion-checkbox.d.ts

@@ -1,6 +1,6 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface InclusionCheckbox {
-    readonly slot?: SlotComponent<{
+    readonly as?: SlotComponent<{
         checked: boolean;
         indeterminate: boolean;
         toggle: (s?: boolean) => void;

package/dist/filter-tree/inclusion-checkbox.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useTreeItemContext } from "./context";
-export const InclusionCheckbox = forwardRef(function InclusionCheckbox({ slot, ...props }, forwarded) {
+export const InclusionCheckbox = forwardRef(function InclusionCheckbox({ as, ...props }, forwarded) {
     const { isChecked, onCheckChange, isIndeterminate } = useTreeItemContext();
     const rendered = useSlot({
         props: [props],
         ref: forwarded,
         state: { checked: isChecked, toggle: onCheckChange, indeterminate: isIndeterminate },
-        slot: slot ?? (_jsx("input", { type: "checkbox", checked: isChecked, "aria-label": "visibility toggle", onChange: () => onCheckChange() })),
+        slot: as ?? (_jsx("input", { type: "checkbox", checked: isChecked, "aria-label": "visibility toggle", onChange: () => onCheckChange() })),
     });
     return rendered;
 });

package/dist/filter-tree/label.d.ts

@@ -1,5 +1,5 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface LabelProps {
-    readonly slot?: SlotComponent;
+    readonly as?: SlotComponent;
 }
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/filter-tree/label.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef, useMemo } from "react";
 import { useTreeItemContext } from "./context";
-export const Label = forwardRef(function Label({ slot, ...props }, forwarded) {
+export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
     const { item } = useTreeItemContext();
     const label = useMemo(() => {
         if (item.kind == "branch")
@@ -12,7 +12,7 @@ export const Label = forwardRef(function Label({ slot, ...props }, forwarded) {
     const rendered = useSlot({
         props: [{ children: label }, props],
         ref: forwarded,
-        slot: slot ?? _jsx("div", {}),
+        slot: as ?? _jsx("div", {}),
     });
     return rendered;
 });

package/dist/filter-tree/root.d.ts

@@ -4,10 +4,10 @@ import type { UseTreeFilterReturn } from "./hooks/use-filter-tree";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export type FilterTreeRootProps<T> = UseTreeFilterReturn<T>["rootProps"] & {
     readonly grid: Grid<T>;
-    readonly slotLoading?: SlotComponent;
-    readonly slotError?: SlotComponent<{
+    readonly loadingAs?: SlotComponent;
+    readonly errorAs?: SlotComponent<{
         error: any;
         refetch: () => void;
     }>;
 };
-export declare function Root<T>({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, slotError, slotLoading, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }: PropsWithChildren<FilterTreeRootProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function Root<T>({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, errorAs, loadingAs, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }: PropsWithChildren<FilterTreeRootProps<T>>): import("react/jsx-runtime").JSX.Element;