@1771technologies/lytenyte-pro 1.0.0-beta.2 → 1.0.0-beta.21

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.

package/dist/cell-selection/adjust-rect-for-row-and-cell-span.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect, Grid } from "../+types";
+import type { DataRect, Grid } from "../+types.js";
 export declare function adjustRectForRowAndCellSpan<T>(grid: Grid<T>, rect: DataRect): DataRect;

package/dist/cell-selection/adjust-rect-for-row-and-cell-span.js

@@ -1,4 +1,4 @@
-import { getRootCell } from "./get-root-cell";
+import { getRootCell } from "./get-root-cell.js";
 export function adjustRectForRowAndCellSpan(grid, rect) {
     let { rowStart, rowEnd, columnStart, columnEnd } = rect;
     // Check the top row of the rect.

package/dist/cell-selection/are-rects-equal.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect } from "../+types";
+import type { DataRect } from "../+types.js";
 export declare function areRectsEqual(left: DataRect, right: DataRect): boolean;

package/dist/cell-selection/bound-selection-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect, Grid } from "../+types";
+import type { DataRect, Grid } from "../+types.js";
 export declare function boundSelectionRect(grid: Grid<any>, rect: DataRect): 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/deselect-rect-range.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect } from "../+types";
+import type { DataRect } from "../+types.js";
 export declare function deselectRectRange(rect: DataRect, deselectRect: DataRect): DataRect[];

package/dist/cell-selection/deselect-rect-range.js

@@ -1,4 +1,4 @@
-import { isOverlappingRect } from "./is-overlapping-rect";
+import { isOverlappingRect } from "./is-overlapping-rect.js";
 export function deselectRectRange(rect, deselectRect) {
     if (!isOverlappingRect(rect, deselectRect))
         return [rect];

package/dist/cell-selection/expand-cell-selection-down.d.ts

@@ -1,5 +1,5 @@
-import type { Grid } from "../+types";
-import type { InternalAtoms } from "../state/+types";
+import type { Grid } from "../+types.js";
+import type { InternalAtoms } from "../state/+types.js";
 export declare function expandCellSelectionDown(grid: Grid<any> & {
     internal: InternalAtoms;
 }, meta: boolean): void;

package/dist/cell-selection/expand-cell-selection-down.js

@@ -1,4 +1,4 @@
-import { getRootCell } from "./get-root-cell";
+import { getRootCell } from "./get-root-cell.js";
 export function expandCellSelectionDown(grid, meta) {
     const cellSelections = grid.state.cellSelections.get();
     const rect = cellSelections.at(-1);

package/dist/cell-selection/expand-cell-selection-end.d.ts

@@ -1,5 +1,5 @@
-import type { Grid } from "../+types";
-import type { InternalAtoms } from "../state/+types";
+import type { Grid } from "../+types.js";
+import type { InternalAtoms } from "../state/+types.js";
 export declare function expandCellSelectionEnd(grid: Grid<any> & {
     internal: InternalAtoms;
 }, meta: boolean): void;

package/dist/cell-selection/expand-cell-selection-end.js

@@ -1,4 +1,4 @@
-import { getRootCell } from "./get-root-cell";
+import { getRootCell } from "./get-root-cell.js";
 export function expandCellSelectionEnd(grid, meta) {
     const selections = grid.state.cellSelections.get();
     const cellSelectionPivot = grid.internal.cellSelectionPivot.get();

package/dist/cell-selection/expand-cell-selection-start.d.ts

@@ -1,5 +1,5 @@
-import type { InternalAtoms } from "../state/+types";
-import type { Grid } from "../+types";
+import type { InternalAtoms } from "../state/+types.js";
+import type { Grid } from "../+types.js";
 export declare function expandCellSelectionStart(grid: Grid<any> & {
     internal: InternalAtoms;
 }, meta: boolean): void;

package/dist/cell-selection/expand-cell-selection-start.js

@@ -1,4 +1,4 @@
-import { getRootCell } from "./get-root-cell";
+import { getRootCell } from "./get-root-cell.js";
 export function expandCellSelectionStart(grid, meta) {
     const selections = grid.state.cellSelections.get();
     const cellSelectionPivot = grid.internal.cellSelectionPivot.get();

package/dist/cell-selection/expand-cell-selection-up.d.ts

@@ -1,5 +1,5 @@
-import type { InternalAtoms } from "../state/+types";
-import type { Grid } from "../+types";
+import type { InternalAtoms } from "../state/+types.js";
+import type { Grid } from "../+types.js";
 export declare function expandCellSelectionUp(grid: Grid<any> & {
     internal: InternalAtoms;
 }, meta: boolean): void;

package/dist/cell-selection/expand-cell-selection-up.js

@@ -1,4 +1,4 @@
-import { getRootCell } from "./get-root-cell";
+import { getRootCell } from "./get-root-cell.js";
 export function expandCellSelectionUp(grid, meta) {
     const selections = grid.state.cellSelections.get();
     const cellSelectionPivot = grid.internal.cellSelectionPivot.get();

package/dist/cell-selection/full-width-start-end-index.d.ts

@@ -1,2 +1,2 @@
-import type { Grid } from "../+types";
+import type { Grid } from "../+types.js";
 export declare function fullWidthStartEndIndex(grid: Grid<any>): number[];

package/dist/cell-selection/get-root-cell.d.ts

@@ -1,2 +1,2 @@
-import type { Grid, PositionGridCell } from "../+types";
+import type { Grid, PositionGridCell } from "../+types.js";
 export declare const getRootCell: (grid: Grid<any>, rowIndex: number, columnIndex: number) => PositionGridCell["root"];

package/dist/cell-selection/get-root-cell.js

@@ -1,5 +1,5 @@
-import { getSpanFn } from "../state/helpers/get-span-callback";
-import { getFullWidthCallback } from "../state/helpers/get-full-width-callback";
+import { getSpanFn } from "../state/helpers/get-span-callback.js";
+import { getFullWidthCallback } from "../state/helpers/get-full-width-callback.js";
 import { applyLayoutUpdate } from "@1771technologies/lytenyte-shared";
 export const getRootCell = (grid, rowIndex, columnIndex) => {
     const rds = grid.state.rowDataSource.get();

package/dist/cell-selection/is-bottom-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect, Grid } from "../+types";
+import type { DataRect, Grid } from "../+types.js";
 export declare function isBottomRect(grid: Grid<any>, rect: DataRect): boolean;

package/dist/cell-selection/is-center-col-rect.d.ts

@@ -1,4 +1,4 @@
-import type { Grid } from "../+types";
+import type { Grid } from "../+types.js";
 export declare function isCenterColRect(grid: Grid<any>, rect: {
     columnStart: number;
     columnEnd: number;

package/dist/cell-selection/is-center-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect, Grid } from "../+types";
+import type { DataRect, Grid } from "../+types.js";
 export declare function isCenterRect(grid: Grid<any>, rect: DataRect): boolean;

package/dist/cell-selection/is-end-rect.d.ts

@@ -1,4 +1,4 @@
-import type { Grid } from "../+types";
+import type { Grid } from "../+types.js";
 export declare function isEndRect(grid: Grid<any>, rect: {
     columnStart: number;
     columnEnd: number;

package/dist/cell-selection/is-overlapping-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect } from "../+types";
+import type { DataRect } from "../+types.js";
 export declare function isOverlappingRect(rect1: DataRect, rect2: DataRect): boolean;

package/dist/cell-selection/is-start-rect.d.ts

@@ -1,4 +1,4 @@
-import type { Grid } from "../+types";
+import type { Grid } from "../+types.js";
 export declare function isStartRect(grid: Grid<any>, rect: {
     columnStart: number;
     columnEnd: number;

package/dist/cell-selection/is-top-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect, Grid } from "../+types";
+import type { DataRect, Grid } from "../+types.js";
 export declare function isTopRect(grid: Grid<any>, rect: DataRect): boolean;

package/dist/cell-selection/is-within-selection-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect } from "../+types";
+import type { DataRect } from "../+types.js";
 export declare function isWithinSelectionRect(rect: DataRect, r: number, c: number): boolean;

package/dist/cell-selection/split-cell-selection-rect.d.ts

@@ -1,4 +1,4 @@
-import type { DataRect } from "../+types";
+import type { DataRect } from "../+types.js";
 interface SplitCellSelectionRectArgs {
     readonly rect: DataRect;
     readonly colStartCount: number;

package/dist/cell-selection/update-additive-cell-selection.d.ts

@@ -1,5 +1,5 @@
-import type { DataRect, Grid } from "../+types";
-import type { InternalAtoms } from "../state/+types";
+import type { DataRect, Grid } from "../+types.js";
+import type { InternalAtoms } from "../state/+types.js";
 export declare function updateAdditiveCellSelection(grid: Grid<any> & {
     internal: InternalAtoms;
 }, rect: DataRect): void;

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

@@ -1,13 +1,12 @@
-import { boundSelectionRect } from "./bound-selection-rect";
-import { adjustRectForRowAndCellSpan } from "./adjust-rect-for-row-and-cell-span";
-import { areRectsEqual } from "./are-rects-equal";
-import { splitCellSelectionRect } from "./split-cell-selection-rect";
+import { boundSelectionRect } from "./bound-selection-rect.js";
+import { adjustRectForRowAndCellSpan } from "./adjust-rect-for-row-and-cell-span.js";
+import { areRectsEqual } from "./are-rects-equal.js";
+import { splitCellSelectionRect } from "./split-cell-selection-rect.js";
 export function updateAdditiveCellSelection(grid, rect) {
     const s = grid.state.columnMeta.get();
     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/cell-selection/use-edge-scroll.d.ts

@@ -1,5 +1,5 @@
-import type { Grid } from "../+types";
-import type { InternalAtoms } from "../state/+types";
+import type { Grid } from "../+types.js";
+import type { InternalAtoms } from "../state/+types.js";
 export declare function useEdgeScroll(grid: Grid<any> & {
     internal: InternalAtoms;
 }): {

package/dist/cells/cell.js

@@ -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,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.js

@@ -1,5 +1,5 @@
 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";
@@ -9,8 +9,23 @@ export const Branch = forwardRef(function Branch({ item, label, ...props }, forw
     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.branch.data.idOccurrence, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
+                props.onKeyDown?.(ev);
+                if (ev.key === " ") {
+                    toggle();
+                    ev.preventDefault();
+                }
+            }, labelWrap: _jsx(DropWrap, { "data-ln-column-manager-branch": true, "data-ln-column-id": item.branch.data.idOccurrence, accepted: [accepted], onEnter: (el) => {
                     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/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

@@ -2,7 +2,7 @@ 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) {
+export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     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/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,6 +12,16 @@ 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()
@@ -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.leaf.data.id, ref: forwarded, ...item.attrs, style: { ...props.style, ...item.attrs.style }, onKeyDown: (ev) => {
+                    props.onKeyDown?.(ev);
+                    if (ev.key === " ") {
+                        toggle();
+                        ev.preventDefault();
+                    }
+                }, "data-ln-column-manager-leaf": true, "data-ln-column-id": item.leaf.data.id }) }) }));
 });

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

@@ -3,7 +3,7 @@ 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 as?: SlotComponent;
     readonly placeholder?: (p: {
         columns: Column<any>[];
         item: TreeVirtualItem<Column<any>>;

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);
@@ -52,7 +52,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/root.js

@@ -16,5 +16,5 @@ export function Root({ grid, children, treeRef, root, ...rootProps }) {
         }
         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 }) }) }));
+    return (_jsx(branchLookupContext.Provider, { value: branchLookup, children: _jsx(GridProvider, { value: grid, children: _jsx(TreeRoot, { selectMode: "none", transitionEnter: 200, transitionExit: 200, expansionDefault: true, ref: treeRef, ...rootProps, children: children }) }) }));
 }