@1771technologies/lytenyte-pro 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/+types.d.ts

@@ -892,7 +892,8 @@ export interface HeaderGroupCellLayout {
      */
     readonly isCollapsible: boolean;
     /**
-     * A unique identifier that can be used for rendering keys or tracking elements.
+     * The id for the header group. Note this is not unique across all header groups. In particular
+     *       split header groups with the same path will share the same id. Prefer `idOccurrence` for unique keys.
      */
     readonly id: string;
     /**
@@ -1232,7 +1233,7 @@ export interface ColumnBase<T> {
     /**
      * Function used to render a floating row cell. Only called when floating rows are enabled. Must return a React node.
      */
-    readonly floatingRenderer?: HeaderFloatingCellRenderer<T>;
+    readonly floatingCellRenderer?: HeaderFloatingCellRenderer<T>;
     /**
      * Defines how to render the cell content. Accepts a renderer function or a string referencing a registered renderer.
      */
@@ -1287,7 +1288,7 @@ export interface ColumnMarker<T> {
     /**
      * Function used to render a floating row cell. Only called when floating rows are enabled. Must return a React node.
      */
-    readonly floatingRenderer?: HeaderFloatingCellRenderer<T>;
+    readonly floatingCellRenderer?: HeaderFloatingCellRenderer<T>;
     /**
      * Specifies the preferred width of the column. This value is ignored if flex sizing is used, or if it violates the column's min/max bounds.
      */
@@ -1441,7 +1442,7 @@ export interface Column<T> {
     /**
      * Function used to render a floating row cell. Only called when floating rows are enabled. Must return a React node.
      */
-    readonly floatingRenderer?: HeaderFloatingCellRenderer<T>;
+    readonly floatingCellRenderer?: HeaderFloatingCellRenderer<T>;
     /**
      * Defines how to render the cell content. Accepts a renderer function or a string referencing a registered renderer.
      */
@@ -1532,7 +1533,7 @@ export interface RowGroupColumn<T> {
     /**
      * Function used to render a floating row cell. Only called when floating rows are enabled. Must return a React node.
      */
-    readonly floatingRenderer?: HeaderFloatingCellRenderer<T>;
+    readonly floatingCellRenderer?: HeaderFloatingCellRenderer<T>;
     /**
      * Describes the capabilities and intended UI behavior of the column. These hints are used by external UI components.
      */
@@ -1675,6 +1676,46 @@ export interface ColumnGroupMeta {
  * Used to build dynamic, collapsible column group layouts in LyteNyte Grid.
  */
 export type ColumnGroupVisibility = "always" | "close" | "open";
+/**
+ * Parameters required to initialize a client-side row data source.
+ */
+export interface ClientRowDataSourcePaginatedParams<T> {
+    /**
+     * The primary dataset passed to LyteNyte Grid for display.
+     */
+    readonly data: T[];
+    /**
+     * Rows to pin to the top of the grid, rendered above all scrollable rows.
+     */
+    readonly topData?: T[];
+    /**
+     * Rows to pin to the bottom of the grid, rendered below all scrollable rows.
+     */
+    readonly bottomData?: T[];
+    /**
+     * If true, the data source will reflect external mutations to the original data array.
+     */
+    readonly reflectData?: boolean;
+    /**
+     * Callback to derive a unique id for grouped (branch) rows based on group value path.
+     */
+    readonly rowIdBranch?: (path: string[]) => string;
+    /**
+     * Callback to derive a unique id for each leaf row. Receives the row data and index.
+     */
+    readonly rowIdLeaf?: (d: RowLeaf<T>, i: number) => string;
+    /**
+     * Callback that transforms a set of values for a given column into the in filter items LyteNyte Grid should use.
+     */
+    readonly transformInFilterItem?: (params: {
+        column: Column<T>;
+        values: unknown[];
+    }) => FilterInFilterItem[];
+    /**
+     * The number of rows to have per page. This will impact the total page count.
+     */
+    readonly rowsPerPage?: number;
+}
 /**
  * Enhanced parameters for a client-side row data source with additional filtering support.
  */
@@ -1704,12 +1745,12 @@ export interface ClientRowDataSourceParams<T> {
      */
     readonly rowIdLeaf?: (d: RowLeaf<T>, i: number) => string;
     /**
-     * Callback that transforms a column in-filter item before it's applied.
+     * Callback that transforms a set of values for a given column into the in filter items LyteNyte Grid should use.
      */
     readonly transformInFilterItem?: (params: {
-        field: unknown;
         column: Column<T>;
-    }) => FilterInFilterItem;
+        values: unknown[];
+    }) => FilterInFilterItem[];
 }
 /**
  * Parameters for initializing a tree-structured data source in LyteNyte Grid.
@@ -1740,12 +1781,12 @@ export interface ClientTreeDataSourceParams<T> {
      */
     readonly rowIdLeaf?: (d: RowLeaf<T>, i: number) => string;
     /**
-     * Callback that transforms a column in-filter item before it's applied.
+     * Callback that transforms a set of values for a given column into the in filter items LyteNyte Grid should use.
      */
     readonly transformInFilterItem?: (params: {
-        field: unknown;
         column: Column<T>;
-    }) => FilterInFilterItem;
+        values: unknown[];
+    }) => FilterInFilterItem[];
     /**
      * Returns the hierarchical path to group a given data row in tree mode.
      */
@@ -1806,6 +1847,10 @@ export interface RowDataSourceClientPaginated<T> {
      * Adds new rows to the grid optionally at a specific index, beginning, or end.
      */
     readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+    /**
+     * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+     */
+    readonly rowSetCenterData: (newRows: any[]) => void;
     /**
      * Sets the data for rows pinned to the top section.
      */
@@ -1823,6 +1868,10 @@ export interface RowDataSourceClientPaginated<T> {
      *   May return items synchronously or as a Promise.
      */
     readonly inFilterItems: (column: Column<T>) => Promise<FilterInFilterItem[]> | FilterInFilterItem[];
+    /**
+     * A client data source method to retrieve the raw data passed to the data source.
+     */
+    readonly rowData: (section: RowSection) => T[];
 }
 /**
  * Represents pagination-related state for the client row data source in
@@ -1899,6 +1948,10 @@ export interface RowDataSourceClient<T> {
      * Adds new rows to the grid optionally at a specific index, beginning, or end.
      */
     readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+    /**
+     * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+     */
+    readonly rowSetCenterData: (newRows: any[]) => void;
     /**
      * Sets the data for rows pinned to the top section.
      */
@@ -1912,6 +1965,10 @@ export interface RowDataSourceClient<T> {
      *   May return items synchronously or as a Promise.
      */
     readonly inFilterItems: (column: Column<T>) => Promise<FilterInFilterItem[]> | FilterInFilterItem[];
+    /**
+     * A client data source method to retrieve the raw data passed to the data source.
+     */
+    readonly rowData: (section: RowSection) => T[];
 }
 /**
  * The row data source interface used by LyteNyte Grid to retrieve and manage row data.
@@ -1966,6 +2023,10 @@ export interface RowDataSource<T> {
      * Adds new rows to the grid optionally at a specific index, beginning, or end.
      */
     readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+    /**
+     * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+     */
+    readonly rowSetCenterData: (newRows: any[]) => void;
     /**
      * Sets the data for rows pinned to the top section.
      */
@@ -2039,6 +2100,10 @@ export interface RowDataSourceServer<T> {
      * Adds new rows to the grid optionally at a specific index, beginning, or end.
      */
     readonly rowAdd: (newRows: any[], atIndex?: number | "beginning" | "end") => void;
+    /**
+     * Sets the data for the center rows (scrollable rows) of the grid. Effectively replacing the current row data.
+     */
+    readonly rowSetCenterData: (newRows: any[]) => void;
     /**
      * Sets the data for rows pinned to the top section.
      */
@@ -2573,6 +2638,10 @@ export interface CellRendererParams<T> {
      * Indicates whether the row is in an indeterminate selection state.
      */
     readonly rowIndeterminate: boolean;
+    /**
+     * The pinning state of a row, used to fix it to the top or bottom of the grid.
+     */
+    readonly rowPin: RowPin;
 }
 /**
  * The parameters the `columnAutosize` method accepts.
@@ -2641,7 +2710,7 @@ export interface GridApi<T> {
      * Returns the column at the specified visible index. If the index is out of bounds or
      *   the column is hidden (due to visibility rules or collapsed groups), this will return null.
      */
-    readonly columnFromIndex: (columnIndex: number) => Column<T> | null;
+    readonly columnByIndex: (columnIndex: number) => Column<T> | null;
     /**
      * Returns the index of a visible column based on its id or column object.
      *   Returns -1 if the column is not currently visible (e.g., hidden or inside a collapsed group).
@@ -2805,7 +2874,7 @@ export interface GridApi<T> {
      * Returns the raw cell data within a rectangular selection of the grid.
      *   This can be useful for custom data processing or exporting workflows.
      */
-    readonly exportDataRect: (params?: ExportDataRectParams) => ExportDataRectResult<T>;
+    readonly exportDataRect: (params?: ExportDataRectParams) => Promise<ExportDataRectResult<T>>;
     /**
      * Exports the cell data for a given rectangle of the grid as a CSV-formatted string.
      *   The rectangle can be customized through parameters such as selected rows, columns, or cell ranges.
@@ -4148,6 +4217,11 @@ export interface EditSetterParams<T> {
      * A reference to a column definition in LyteNyte Grid.
      */
     readonly column: Column<T>;
+    /**
+     * The current edit value of the cell being edited. Useful when the cell is derived from data and not
+     * actually present in the row data.
+     */
+    readonly value: any;
     /**
      * The new row data after applying edits. This is an intermediate representation,
      * not yet committed to the grid.
@@ -4775,7 +4849,7 @@ export type ExportDataRectFn<T> = (
 /**
  * Optional parameters for exporting a DataRect.
  */
-params: ExportDataRectParams) => ExportDataRectResult<T>;
+params: ExportDataRectParams) => Promise<ExportDataRectResult<T>>;
 /**
  * Parameters for exporting a specific rectangular region of the grid using a DataRect.
  */

package/dist/cell-selection/cell-selection-driver.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useGridRoot } from "../context";
 import { useEdgeScroll } from "./use-edge-scroll";
-import { getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-js-utils";
+import { equal, getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-js-utils";
 import { getNearestFocusable, getPositionFromFocusable } from "@1771technologies/lytenyte-shared";
 import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 import { updateAdditiveCellSelection } from "./update-additive-cell-selection";
@@ -238,8 +238,16 @@ export function CellSelectionDriver() {
         };
     }, [cancelX, cancelY, edgeScrollX, edgeScrollY, grid, mode, viewport]);
     useEffect(() => {
+        let prev = null;
         return grid.internal.focusActive.watch(() => {
             const focus = grid.internal.focusActive.get();
+            // If the focus is null, then we should just return. This keeps the existing selection
+            // in place - for things like copy and paste.
+            if (!focus)
+                return;
+            if (equal(prev, focus))
+                return;
+            prev = focus;
             if (focus?.kind !== "cell" && focus?.kind !== "full-width") {
                 grid.state.cellSelections.set([]);
                 grid.internal.cellSelectionPivot.set(null);

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

@@ -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";
@@ -10,9 +10,10 @@ const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarde
     const grid = useGridRoot().grid;
     const cx = grid.state;
     grid.internal.refreshKey.useValue();
+    const base = grid.state.columnBase.useValue();
     const row = cell.row.useValue();
     const renderers = cx.cellRenderers.useValue();
-    const providedRenderer = children ?? cell.column.cellRenderer;
+    const providedRenderer = children ?? cell.column.cellRenderer ?? base.cellRenderer;
     const Renderer = providedRenderer
         ? typeof providedRenderer === "string"
             ? (renderers[providedRenderer] ?? CellDefault)
@@ -32,6 +33,8 @@ 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) }))] }));
+    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

@@ -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;