@1771technologies/lytenyte-pro 0.9.3 → 1.0.0-beta.0

package/dist/cells/cell-editor.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { getTabbables } from "@1771technologies/lytenyte-dom-utils";
+import { useGridRoot } from "../context";
+import { editOnChange } from "../state/helpers/edit-on-change";
+import { handleNavigationKeys } from "@1771technologies/lytenyte-shared";
+export function CellEditor({ cell }) {
+    const [el, setEl] = useState(null);
+    const grid = useGridRoot().grid;
+    useEffect(() => {
+        if (!el)
+            return;
+        const focusFirst = () => {
+            const tabbables = getTabbables(el);
+            if (!el.contains(document.activeElement))
+                tabbables.at(0)?.focus();
+        };
+        const controller = new AbortController();
+        if (el.parentElement) {
+            el.parentElement.addEventListener("focus", () => {
+                focusFirst();
+            }, { signal: controller.signal });
+        }
+        focusFirst();
+        return () => controller.abort();
+    }, [el]);
+    return (_jsx("div", { ref: setEl, style: { width: "100%", height: "100%" }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
+                const parent = el?.parentElement;
+                grid.api.editEnd(true);
+                setTimeout(() => {
+                    parent?.focus();
+                }, 4);
+            }
+            if (e.key === "Enter") {
+                const ds = grid.state.rowDataStore;
+                handleNavigationKeys({
+                    ctrlKey: false,
+                    metaKey: false,
+                    key: "ArrowDown",
+                    preventDefault: () => { },
+                    stopPropagation: () => { },
+                }, {
+                    vp: grid.state.viewport.get(),
+                    rowCount: ds.rowCount.get(),
+                    topCount: ds.rowTopCount.get(),
+                    centerCount: ds.rowCenterCount.get(),
+                    columnCount: grid.state.columnMeta.get().columnsVisible.length,
+                    focusActive: grid.internal.focusActive,
+                    id: grid.state.gridId.get(),
+                    layout: grid.internal.layout.get(),
+                    rtl: grid.state.rtl.get(),
+                    scrollIntoView: grid.api.scrollIntoView,
+                });
+            }
+            e.stopPropagation();
+        }, children: _jsx(EditRenderer, { cell: cell }) }));
+}
+function EditRenderer({ cell }) {
+    const column = cell.column;
+    const ctx = useGridRoot();
+    const base = ctx.grid.state.columnBase.useValue();
+    const editFuncs = ctx.grid.state.editRenderers.useValue();
+    const editRenderer = column.editRenderer ?? base.editRenderer;
+    const activeData = ctx.grid.internal.editData.useValue();
+    const row = cell.row.get();
+    const value = ctx.grid.api.columnField(column, row.kind === "branch"
+        ? { kind: "branch", data: activeData, key: row.key }
+        : { kind: "leaf", data: activeData });
+    const onChange = useCallback((c) => {
+        editOnChange({
+            value: c,
+            activeData,
+            base,
+            column,
+            grid: ctx.grid,
+            row,
+            rowIndex: cell.rowIndex,
+        });
+    }, [activeData, base, cell.rowIndex, column, ctx.grid, row]);
+    if (!editRenderer) {
+        const type = column.type;
+        if (type === "number")
+            return (_jsx("input", { type: "number", value: value, onChange: (e) => onChange(Number.parseFloat(e.target.value)) }));
+        if (type === "date")
+            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) });
+    }
+    const Renderer = typeof editRenderer === "string" ? editFuncs[editRenderer] : editRenderer;
+    const validation = ctx.grid.internal.editValidation.useValue();
+    if (!Renderer)
+        return null;
+    return (_jsx(Renderer, { column: column, grid: ctx.grid, onChange: onChange, row: cell.row.get(), rowIndex: cell.rowIndex, value: value, rowValidationState: validation }));
+}

package/dist/cells/cell.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import type { CellRendererFn, RowCellLayout } from "../+types";
+export interface CellProps {
+    readonly cell: RowCellLayout<any>;
+    readonly children?: ReactNode | CellRendererFn<any>;
+}
+export declare const Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cells/cell.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
+import { useGridRoot } from "../context";
+import { CellReact } from "@1771technologies/lytenyte-shared";
+import { CellDefault } from "./cell-default";
+import { CellEditor } from "./cell-editor";
+import { useRowMeta } from "../rows/row/context";
+const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarded) {
+    const grid = useGridRoot().grid;
+    const cx = grid.state;
+    grid.internal.refreshKey.useValue();
+    const row = cell.row.useValue();
+    const renderers = cx.cellRenderers.useValue();
+    const providedRenderer = children ?? cell.column.cellRenderer;
+    const Renderer = providedRenderer
+        ? typeof providedRenderer === "string"
+            ? (renderers[providedRenderer] ?? CellDefault)
+            : providedRenderer
+        : CellDefault;
+    const [isEditing, setIsEditing] = useState(false);
+    useEffect(() => {
+        return grid.internal.editActivePos.watch(() => {
+            const pos = grid.internal.editActivePos.get();
+            if (!pos)
+                return setIsEditing(false);
+            setIsEditing(pos.column === cell.column &&
+                pos.rowIndex >= cell.rowIndex &&
+                pos.rowIndex < cell.rowIndex + cell.rowSpan);
+        });
+    }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
+    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) }))] }));
+});
+export const Cell = fastDeepMemo(CellImpl);

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

@@ -0,0 +1,4 @@
+import type { Column } from "../+types";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export declare const branchLookupContext: import("react").Context<Record<string, PathBranch<Column<any>>>>;
+export declare const useBranchLookup: () => Record<string, PathBranch<Column<any>>>;

package/dist/column-manager/branch-lookup-context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const branchLookupContext = createContext({});
+export const useBranchLookup = () => useContext(branchLookupContext);

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

@@ -0,0 +1,9 @@
+import type { TreeVirtualBranch } from "../tree-view/virtualized/make-virtual-tree";
+import type { Column } from "../+types";
+import type { SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface ColumnManagerBranchProps {
+    readonly item: TreeVirtualBranch<Column<any>>;
+    readonly label: SlotComponent;
+    readonly expander?: SlotComponent;
+}
+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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, 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) {
+    const grid = useGrid();
+    const id = grid.state.gridId.useValue();
+    const accepted = `${id}/columns`;
+    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 data = dragState.data
+                        .get()
+                        ?.siteLocalData?.[accepted]?.at(-1);
+                    if (!data)
+                        return;
+                    const move = data.id;
+                    if (columns.some((c) => c.id === move))
+                        return;
+                    const allColumns = grid.state.columns.get();
+                    const moveIndex = allColumns.findIndex((c) => c.id === move);
+                    if (moveIndex === -1)
+                        return;
+                    const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
+                    const isBefore = thisIndex > moveIndex;
+                    if (isBefore) {
+                        el.setAttribute("data-ln-is-before", "true");
+                    }
+                    else {
+                        el.setAttribute("data-ln-is-after", "true");
+                    }
+                }, onLeave: (el) => {
+                    el.removeAttribute("data-ln-is-before");
+                    el.removeAttribute("data-ln-is-after");
+                } }), label: label }) }));
+});

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

@@ -0,0 +1,15 @@
+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>>;
+    MoveHandle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./move-handle").MoveHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    useColumnManager: typeof useColumnManager;
+};

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

@@ -0,0 +1,20 @@
+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 { Root } from "./root";
+import { useColumnManager } from "./use-column-manager";
+import { VisibilityCheckbox } from "./visibility-checkbox";
+export const ColumnManager = {
+    Root: Root,
+    Panel: TreePanel,
+    PassiveScroll: ForceSyncScrolling,
+    Leaf,
+    Branch,
+    Label,
+    VisibilityCheckbox,
+    MoveHandle,
+    useColumnManager,
+};

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

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

package/dist/column-manager/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const ColumnItemContext = createContext(null);
+export const useColumnItemContext = () => useContext(ColumnItemContext);

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

@@ -0,0 +1,5 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface LabelProps {
+    readonly slot?: 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

@@ -0,0 +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) {
+    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;
+    }, [item]);
+    const rendered = useSlot({
+        props: [{ children: label }, props],
+        ref: forwarded,
+        slot: slot ?? _jsx("div", {}),
+    });
+    return rendered;
+});

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

@@ -0,0 +1,6 @@
+import type { TreeVirtualLeaf } from "../tree-view/virtualized/make-virtual-tree";
+import type { Column } from "../+types";
+export interface ColumnManagerLeafProps {
+    readonly item: TreeVirtualLeaf<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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, 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";
+export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, forwarded) {
+    const context = useMemo(() => {
+        return { item: item };
+    }, [item]);
+    const grid = useGrid();
+    const id = grid.state.gridId.useValue();
+    const accepted = `${id}/columns`;
+    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 move = data.id;
+                if (columns.some((c) => c.id === move))
+                    return;
+                const allColumns = grid.state.columns.get();
+                const moveIndex = allColumns.findIndex((c) => c.id === move);
+                if (moveIndex === -1)
+                    return;
+                const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
+                const isBefore = thisIndex > moveIndex;
+                if (isBefore) {
+                    el.setAttribute("data-ln-is-before", "true");
+                }
+                else {
+                    el.setAttribute("data-ln-is-after", "true");
+                }
+            }, 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 }) }) }));
+});

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

@@ -0,0 +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";
+export interface MoveHandleProps {
+    readonly slot?: SlotComponent;
+    readonly placeholder?: (p: {
+        columns: Column<any>[];
+        item: TreeVirtualItem<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

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDraggable } from "@1771technologies/lytenyte-dragon";
+import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
+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) {
+    const item = useColumnItemContext().item;
+    const grid = useGrid();
+    const columns = useColumnsFromContext(item);
+    const base = grid.state.columnBase.useValue();
+    const isMovable = useMemo(() => {
+        return columns.every((c) => c.uiHints?.movable ?? base.uiHints?.movable);
+    }, [base.uiHints?.movable, columns]);
+    const { dragProps: { ref, ...otherProps }, } = useDraggable({
+        getItems: () => {
+            return {
+                siteLocalData: {
+                    [`${grid.state.gridId.get()}/columns`]: columns,
+                },
+            };
+        },
+        onDrop: (p) => {
+            const move = p.dropElement.getAttribute("data-ln-column-id");
+            if (!move)
+                return null;
+            if (columns.some((c) => c.id === move))
+                return;
+            const allColumns = grid.state.columns.get();
+            const moveIndex = allColumns.findIndex((c) => c.id === move);
+            if (moveIndex === -1)
+                return;
+            const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
+            const isBefore = thisIndex > moveIndex;
+            grid.api.columnMove({
+                moveColumns: columns,
+                moveTarget: move,
+                before: isBefore,
+            });
+        },
+        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) }));
+        },
+    });
+    const combined = useCombinedRefs(ref, forwarded);
+    const additionalProps = isMovable ? otherProps : {};
+    const renderer = useSlot({
+        props: [{ "aria-label": "Drag to move column" }, additionalProps, props],
+        ref: isMovable ? combined : forwarded,
+        slot: slot ?? _jsx("div", {}),
+    });
+    return renderer;
+});

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

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

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

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

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

@@ -0,0 +1,9 @@
+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"] & {
+    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;

package/dist/column-manager/root.js

@@ -0,0 +1,20 @@
+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 }) }) }));
+}

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

@@ -0,0 +1,19 @@
+import { type Dispatch, type JSX, type SetStateAction } from "react";
+import type { Column, Grid } from "../+types";
+import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree";
+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 declare function useColumnManager<T>(grid: Grid<T>): UseColumnManagerReturn<T>;

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

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { useVirtualizedTree } from "../tree-view/virtualized/use-virtualized-tree";
+export function useColumnManager(grid) {
+    const [expansions, onExpansionChange] = useState({});
+    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,
+    };
+}

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

@@ -0,0 +1,3 @@
+import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree";
+import type { Column } from "../+types";
+export declare function useColumnsFromContext(item: TreeVirtualItem<Column<any>>): Column<any>[];

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

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useBranchLookup } from "./branch-lookup-context";
+export function useColumnsFromContext(item) {
+    const lookup = useBranchLookup();
+    const columns = useMemo(() => {
+        if (item.kind === "branch") {
+            const allChildren = [];
+            const branch = lookup[item.branch.data.idOccurrence];
+            const stack = [...branch.children.values()];
+            while (stack.length) {
+                const p = stack.pop();
+                if (p.kind === "branch") {
+                    stack.push(...p.children.values());
+                    continue;
+                }
+                allChildren.push(p.data);
+            }
+            return allChildren;
+        }
+        return [item.leaf.data];
+    }, [item, lookup]);
+    return columns;
+}

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

@@ -0,0 +1,9 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface VisibilityCheckbox {
+    readonly slot?: SlotComponent<{
+        visible: boolean;
+        indeterminate: boolean;
+        toggle: (s?: boolean) => void;
+    }>;
+}
+export declare const VisibilityCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & VisibilityCheckbox, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-react-hooks";
+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) {
+    const { item } = useColumnItemContext();
+    const grid = useGrid();
+    const base = grid.state.columnBase.useValue();
+    const columns = useColumnsFromContext(item);
+    const [isVisible, isIndeterminate] = useMemo(() => {
+        const allVisible = columns.every((c) => !(c.hide ?? base.hide));
+        const someVisible = columns.some((c) => !(c.hide ?? base.hide));
+        return [allVisible, !allVisible && someVisible];
+    }, [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]);
+    const rendered = useSlot({
+        props: [props],
+        ref: forwarded,
+        slot: slot ?? (_jsx("input", { type: "checkbox", checked: isVisible, "aria-label": "visibility toggle", onChange: () => {
+                toggle();
+            } })),
+        state: { visible: isVisible, indeterminate: isIndeterminate, toggle },
+    });
+    return rendered;
+});

package/dist/context.d.ts

@@ -0,0 +1,10 @@
+import type { Grid } from "./+types";
+import type { InternalAtoms } from "./state/+types";
+export interface GridRootContext {
+    readonly ref: (el: HTMLElement | SVGElement | null) => void;
+    readonly grid: Grid<any> & {
+        internal: InternalAtoms;
+    };
+}
+export declare const RootProvider: import("react").Provider<GridRootContext>;
+export declare const useGridRoot: () => GridRootContext;

package/dist/context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const context = createContext(null);
+export const RootProvider = context.Provider;
+export const useGridRoot = () => useContext(context);

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

@@ -0,0 +1,10 @@
+import type { TreeVirtualBranch } from "../tree-view/virtualized/make-virtual-tree";
+import type { FilterInFilterItem } from "../+types";
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface FilterTreeBranch {
+    readonly item: TreeVirtualBranch<FilterInFilterItem>;
+    readonly label: SlotComponent;
+    readonly labelWrap?: SlotComponent;
+    readonly expander?: SlotComponent;
+}
+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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TreeBranch } from "../tree-view/branch/branch";
+import { useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { FilterTreeItemContext } from "./context";
+import { useTreeItem } from "./hooks/use-tree-item";
+export const Branch = forwardRef(function Branch({ item, labelWrap, label, ...props }, forwarded) {
+    const value = useTreeItem(item);
+    const labelSlot = useSlot({
+        slot: labelWrap ?? _jsx("div", {}),
+        props: [
+            {
+                onClick: () => value.onCheckChange(),
+            },
+        ],
+    });
+    return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.idOccurrence, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
+                if (ev.key === " ")
+                    value.onCheckChange();
+            }, label: label, labelWrap: labelSlot }) }));
+});