@1771technologies/lytenyte-pro 1.0.0-beta.13 → 1.0.0-beta.15

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 }) }) }));
 }

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

@@ -16,4 +16,8 @@ export interface UseColumnManagerReturn<T> {
     readonly tree: TreeVirtualItem<Column<T>>[];
     readonly spacer: JSX.Element;
 }
-export declare function useColumnManager<T>(grid: Grid<T>): UseColumnManagerReturn<T>;
+export interface UseColumnManagerArgs<T> {
+    readonly grid: Grid<T>;
+    readonly itemHeight?: number;
+}
+export declare function useColumnManager<T>({ grid, itemHeight, }: UseColumnManagerArgs<T>): UseColumnManagerReturn<T>;

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

@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { useVirtualizedTree } from "../tree-view/virtualized/use-virtualized-tree.js";
-export function useColumnManager(grid) {
+export function useColumnManager({ grid, itemHeight = 24, }) {
     const [expansions, onExpansionChange] = useState({});
     const columns = grid.state.columns.useValue();
     const virt = useVirtualizedTree({
         paths: columns,
         expansions,
-        itemHeight: 24,
+        itemHeight,
         expansionDefault: true,
         nonAdjacentPathTrees: true,
     });

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

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

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

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

package/dist/filter-tree/inclusion-checkbox.d.ts

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

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

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

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

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

package/dist/filter-tree/label.js

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

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

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

package/dist/filter-tree/root.js

@@ -4,7 +4,7 @@ import { GridProvider } from "../grid-provider/provider";
 import { TreeRoot } from "../tree-view/root";
 import { FilterTreeContext } from "./context";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
-export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, slotError, slotLoading, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }) {
+export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, errorAs, loadingAs, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }) {
     const value = useMemo(() => {
         return {
             filter: filterIn,
@@ -16,10 +16,10 @@ export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, e
         };
     }, [applyChangesImmediately, columnId, filterIn, filterInChange, items, pivotMode]);
     const loadingSlot = useSlot({
-        slot: slotLoading ?? _jsx("div", { children: "Loading..." }),
+        slot: loadingAs ?? _jsx("div", { children: "Loading..." }),
     });
     const errorSlot = useSlot({
-        slot: slotError ?? _jsx("div", { children: "Error Occurred Fetching" }),
+        slot: errorAs ?? _jsx("div", { children: "Error Occurred Fetching" }),
         state: { error, refetch: fetchItems },
     });
     if (loading)

package/dist/grid-box/+types.d.ts

@@ -8,6 +8,8 @@ export interface GridBoxItem<T = any> {
     readonly draggable: boolean;
     readonly dragPlaceholder?: () => ReactNode;
     readonly onDrop: (p: DropEventParams) => void;
-    readonly onAction: () => void;
-    readonly onDelete: () => void;
+    readonly onAction: (el: HTMLElement) => void;
+    readonly onDelete: (el: HTMLElement) => void;
+    readonly index: number;
+    readonly source: string;
 }

package/dist/grid-box/item.d.ts

@@ -1,7 +1,10 @@
+import { type CSSProperties } from "react";
 import type { GridBoxItem } from "./+types";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface GridBoxItemProps {
     readonly item: GridBoxItem;
-    readonly itemWrap?: SlotComponent;
+    readonly itemAs?: SlotComponent;
+    readonly itemClassName?: string;
+    readonly itemStyle?: CSSProperties;
 }
 export declare const BoxItem: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & GridBoxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/grid-box/item.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Item } from "../listbox/item";
-import { DropWrap, useDraggable } from "@1771technologies/lytenyte-dragon";
+import { dragState, DropWrap, useDraggable } from "@1771technologies/lytenyte-dragon";
 import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
 import { useGridBoxContext } from "./context";
-export const BoxItem = forwardRef(function BoxItem({ item, itemWrap, ...props }, forwarded) {
+export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName, itemStyle, ...props }, forwarded) {
     const { accepted } = useGridBoxContext();
     const { dragProps } = useDraggable({
         getItems: () => {
@@ -19,15 +19,40 @@ export const BoxItem = forwardRef(function BoxItem({ item, itemWrap, ...props },
     const renderer = useSlot({
         props: [
             {
-                children: (_jsx(Item, { ...props, ...extraProps, onKeyDown: (ev) => {
-                        if (ev.key === " ")
-                            item.onAction?.();
+                children: (_jsx(Item, { ...extraProps, onKeyDown: (ev) => {
+                        if (ev.key === " ") {
+                            item.onAction?.(ev.currentTarget);
+                            ev.preventDefault();
+                        }
                         if (ev.key === "Backspace" || ev.key === "Delete")
-                            item.onDelete?.();
-                    }, onClick: () => item.onAction() })),
+                            item.onDelete?.(ev.currentTarget);
+                    }, onClick: (ev) => item.onAction(ev.currentTarget), className: itemClassName, style: itemStyle, "data-ln-source": item.source })),
             },
         ],
-        slot: itemWrap ?? _jsx("div", {}),
+        slot: itemAs ?? _jsx("div", {}),
     });
-    return _jsx(DropWrap, { accepted: accepted, onDrop: item.onDrop, as: renderer });
+    return (_jsx(DropWrap, { ...props, onEnter: (e) => {
+            const data = dragState.active.get();
+            const thisSource = e.getAttribute("data-ln-source");
+            const dragSource = data?.getAttribute("data-ln-source");
+            if (!data)
+                return;
+            if (thisSource !== dragSource) {
+                e.setAttribute("data-ln-is-after", "true");
+                return;
+            }
+            const thisIndex = Number.parseInt(e.getAttribute("data-ln-index"));
+            const dragIndex = Number.parseInt(e.getAttribute("data-ln-index"));
+            if (Number.isNaN(dragIndex) || Number.isNaN(thisIndex))
+                return;
+            if (thisIndex < dragIndex) {
+                e.setAttribute("data-ln-is-before", "true");
+            }
+            else {
+                e.setAttribute("data-ln-is-after", "true");
+            }
+        }, onLeave: (el) => {
+            el.removeAttribute("data-ln-is-before");
+            el.removeAttribute("data-ln-is-after");
+        }, "data-ln-source": item.source, "data-ln-index": item.index, accepted: accepted, onDrop: item.onDrop, as: renderer }));
 });

package/dist/grid-box/use-aggregation-box-items.js

@@ -4,13 +4,15 @@ export function useAggregationBoxItems({ grid, orientation }) {
     const model = grid.state.aggModel.useValue();
     const gridId = grid.state.gridId.useValue();
     const items = useMemo(() => {
-        const items = Object.entries(model).map(([id, agg]) => {
+        const items = Object.entries(model).map(([id, agg], i) => {
             const column = grid.api.columnById(id);
             const name = column?.name ?? column?.id ?? id;
             const fn = typeof agg.fn === "string" ? agg.fn : "Fn(x)";
             return {
                 draggable: false,
                 id,
+                index: i,
+                source: "aggregation",
                 data: { id, agg },
                 dragData: {},
                 label: `${name} ${fn}`,

package/dist/grid-box/use-column-box-items.d.ts

@@ -9,6 +9,10 @@ export interface OnDropParams<T> {
 export interface OnRootDropParams<T> {
     readonly column: Column<T>;
 }
+export interface OnActionParams<T> {
+    readonly column: Column<T>;
+    readonly el: HTMLElement;
+}
 export interface UseColumnBoxItemArgs<T> {
     readonly grid: Grid<T>;
     readonly orientation?: "horizontal" | "vertical";
@@ -16,8 +20,8 @@ export interface UseColumnBoxItemArgs<T> {
     readonly itemFilter?: (c: Column<T>) => boolean;
     readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
     readonly onDrop?: (p: OnDropParams<T>) => void;
-    readonly onAction?: (c: Column<T>) => void;
-    readonly onDelete?: (c: Column<T>) => void;
+    readonly onAction?: (c: OnActionParams<T>) => void;
+    readonly onDelete?: (c: OnActionParams<T>) => void;
     readonly dragPlaceholder?: (c: Column<T>) => ReactNode;
 }
 export declare function useColumnBoxItems<T>({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable, dragPlaceholder, itemFilter, }: UseColumnBoxItemArgs<T>): {

package/dist/grid-box/use-column-box-items.js

@@ -12,7 +12,7 @@ export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction
             .filter((c) => {
             return itemFilter ? itemFilter(c) : true;
         })
-            .map((c) => {
+            .map((c, i) => {
             const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
             const canAgg = Boolean(c.uiHints?.aggDefault ??
                 c.uiHints?.aggDefault?.length ??
@@ -28,12 +28,14 @@ export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction
             return {
                 label: c.name ?? c.id,
                 id: c.id,
+                index: i,
+                source: "columns",
                 draggable,
                 data: c,
                 dragData: data,
                 dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
-                onAction: () => onAction?.(c),
-                onDelete: () => onDelete?.(c),
+                onAction: (el) => onAction?.({ column: c, el }),
+                onDelete: (el) => onDelete?.({ column: c, el }),
                 onDrop: (p) => {
                     const target = c;
                     const src = p.state.siteLocalData?.[columnId];

package/dist/grid-box/use-row-group-box-items.d.ts

@@ -4,10 +4,10 @@ import type { GridBoxItem } from "./+types.js";
 export interface UseRowGroupBoxItems<T> {
     readonly grid: Grid<T>;
     readonly orientation?: "horizontal" | "vertical";
-    readonly placeholder?: (c: RowGroupModelItem<T>) => ReactNode;
+    readonly dragPlaceholder?: (c: RowGroupModelItem<T>) => ReactNode;
     readonly hideColumnOnGroup?: boolean;
 }
-export declare function useRowGroupBoxItems<T>({ grid, orientation, placeholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
+export declare function useRowGroupBoxItems<T>({ grid, orientation, dragPlaceholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
     rootProps: {
         accepted: string[];
         onRootDrop: (p: DropEventParams) => void;

package/dist/grid-box/use-row-group-box-items.js

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumnOnGroup = true, }) {
+export function useRowGroupBoxItems({ grid, orientation, dragPlaceholder, hideColumnOnGroup = true, }) {
     const rowGroupModel = grid.state.rowGroupModel.useValue();
     const gridId = grid.state.gridId.useValue();
     const items = useMemo(() => {
         const groupId = `${gridId}-group`;
         return rowGroupModel
-            .map((c) => {
+            .map((c, i) => {
             const onDelete = () => {
                 grid.state.rowGroupModel.set((prev) => prev.filter((x) => x !== c));
             };
@@ -58,12 +58,14 @@ export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumn
                     dragData: { [groupId]: c },
                     data: c,
                     draggable: true,
+                    source: "groups",
                     id: c,
+                    index: i,
                     label: column.name ?? column.id,
                     onAction: () => { },
                     onDelete: onDelete,
                     onDrop: onDrop,
-                    dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
+                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
                 };
             }
             else {
@@ -72,11 +74,13 @@ export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumn
                     data: c,
                     draggable: true,
                     id: c.id,
+                    source: "groups",
+                    index: i,
                     label: c.name ?? c.id,
                     onAction: () => { },
                     onDelete: onDelete,
                     onDrop,
-                    dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
+                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
                 };
             }
         })
@@ -88,7 +92,7 @@ export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumn
         gridId,
         hideColumnOnGroup,
         orientation,
-        placeholder,
+        dragPlaceholder,
         rowGroupModel,
     ]);
     const onRootDrop = useEvent((p) => {

package/dist/header/header-cell.d.ts

@@ -3,7 +3,7 @@ import type { HeaderCellFloating, HeaderCellLayout } from "../+types";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface HeaderCellProps<T> {
     readonly cell: HeaderCellLayout<T> | HeaderCellFloating<T>;
-    readonly resizerSlot?: SlotComponent;
+    readonly resizerAs?: SlotComponent;
     readonly resizerClassName?: string;
     readonly resizerStyle?: CSSProperties;
 }

package/dist/header/header-cell.js

@@ -6,7 +6,7 @@ import { fastDeepMemo, useCombinedRefs, } from "@1771technologies/lytenyte-react
 import { useHeaderCellRenderer } from "./use-header-cell-renderer";
 import { ResizeHandler } from "./resize-handler";
 import { useDragMove } from "./use-drag-move";
-const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerSlot, resizerStyle, resizerClassName, children, ...props }, forwarded) {
+const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerAs, resizerStyle, resizerClassName, children, ...props }, forwarded) {
     const grid = useGridRoot().grid;
     const ctx = grid.state;
     const xPositions = ctx.xPositions.useValue();
@@ -19,6 +19,6 @@ const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerSlot, resiz
         : (cell.column.uiHints?.resizable ?? base.uiHints?.resizable ?? false);
     const { ref, ...dragProps } = useDragMove(grid, cell, props.onDragStart);
     const combined = useCombinedRefs(forwarded, ref);
-    return (_jsxs(HeaderCellReact, { ...props, ...dragProps, ref: combined, cell: cell, columnId: cell.column.id, viewportWidth: viewport, isFloating: cell.kind === "floating", rtl: rtl, xPositions: xPositions, children: [children == undefined ? _jsx(Renderer, { column: cell.column, grid: grid }) : children, resizable && cell.kind === "cell" && (_jsx(ResizeHandler, { cell: cell, xPositions: xPositions, slot: resizerSlot, className: resizerClassName, style: resizerStyle }))] }));
+    return (_jsxs(HeaderCellReact, { ...props, ...dragProps, ref: combined, cell: cell, columnId: cell.column.id, viewportWidth: viewport, isFloating: cell.kind === "floating", rtl: rtl, xPositions: xPositions, children: [children == undefined ? _jsx(Renderer, { column: cell.column, grid: grid }) : children, resizable && cell.kind === "cell" && (_jsx(ResizeHandler, { cell: cell, xPositions: xPositions, as: resizerAs, className: resizerClassName, style: resizerStyle }))] }));
 });
 export const HeaderCell = fastDeepMemo(HeaderCellImpl);

package/dist/header/resize-handler.d.ts

@@ -2,11 +2,11 @@ import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { HeaderCellLayout } from "../+types";
 import { type CSSProperties } from "react";
 interface ResizeHandlerProps<T> {
-    readonly slot?: SlotComponent;
+    readonly as?: SlotComponent;
     readonly cell: HeaderCellLayout<T>;
     readonly xPositions: Uint32Array;
     readonly className?: string;
     readonly style?: CSSProperties;
 }
-export declare function ResizeHandler<T>({ slot, cell, xPositions, style, className, }: ResizeHandlerProps<T>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ResizeHandler<T>({ as, cell, xPositions, style, className, }: ResizeHandlerProps<T>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/header/resize-handler.js

@@ -5,7 +5,7 @@ import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, getColIndexFromEl,
 import { useGridRoot } from "../context";
 import { getComputedStyle, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 import { clamp, getClientX } from "@1771technologies/lytenyte-js-utils";
-export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
+export function ResizeHandler({ as, cell, xPositions, style, className, }) {
     const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
     const sx = useGridRoot().grid;
     const double = sx.state.columnDoubleClickToAutosize.useValue();
@@ -57,7 +57,9 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
                     const id = sx.state.gridId.get();
                     const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
                     const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
+                    const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
                     const header = vp.querySelector(headerQuery);
+                    const floating = vp.querySelector(floatingQuery);
                     if (!header)
                         return;
                     const pin = header.getAttribute("data-ln-pin");
@@ -72,6 +74,8 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
                     }
                     const q = Array.from(vp.querySelectorAll(query));
                     q.push(header);
+                    if (floating)
+                        q.push(floating);
                     q.forEach((c) => {
                         if (!isHTMLElement(c))
                             return;
@@ -113,7 +117,7 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
         className,
         style: {
             height: "100%",
-            width: "8px",
+            width: "6px",
             ...style,
             top: "0px",
             insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
@@ -123,7 +127,7 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
     };
     const edge = useSlot({
         props: [defaultProps],
-        slot: slot ?? _jsx("div", {}),
+        slot: as ?? _jsx("div", {}),
     });
     return edge;
 }

package/dist/listbox/item.js

@@ -9,6 +9,7 @@ export const Item = forwardRef(function Item(props, forwarded) {
             const prev = ctx.rtl ? "ArrowRight" : "ArrowLeft";
             if (ev.key !== next && ev.key !== prev)
                 return;
+            ev.preventDefault();
             const items = getTabbables(ev.currentTarget);
             if (!items.length)
                 return;
@@ -18,7 +19,6 @@ export const Item = forwardRef(function Item(props, forwarded) {
             const itemToFocus = items[nextIndex];
             if (!itemToFocus)
                 return;
-            ev.preventDefault();
             ev.stopPropagation();
             itemToFocus.focus();
         }, ref: forwarded, tabIndex: 0, "data-ln-listbox-item": true }));

package/dist/row-data-source-client/filter/compute-filtered-rows.js

@@ -22,7 +22,7 @@ export function computeFilteredRows(rows, grid, filterModel, filterInModel, quic
             const pass = nonIgnored.some((c) => {
                 const field = `${grid.api.columnField(c, { data: row.data, kind: "leaf" })}`;
                 if (sensitivity === "case-insensitive")
-                    field.toLowerCase().includes(quickSearch.toLowerCase());
+                    return field.toLowerCase().includes(quickSearch.toLowerCase());
                 return field.includes(quickSearch);
             });
             if (!pass)

package/dist/sort-manager/sort-add.d.ts

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

package/dist/sort-manager/sort-add.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
-export const SortAdd = forwardRef(function SortAdd({ slot, ...props }, forwarded) {
+export const SortAdd = forwardRef(function SortAdd({ as: as, ...props }, forwarded) {
     const row = useSortRowCtx();
     const renderer = useSlot({
-        props: [props],
+        props: [typeof as !== "function" ? { onClick: row.onAdd, disabled: !row.canAdd } : {}, props],
         ref: forwarded,
-        slot: slot ?? (_jsx("button", { onClick: row.onAdd, disabled: !row.canAdd, children: "+" })),
+        slot: as ?? _jsx("button", { children: "+" }),
         state: { onAdd: row.onAdd, disabled: !row.canAdd },
     });
     return renderer;

package/dist/sort-manager/sort-apply.d.ts

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

package/dist/sort-manager/sort-apply.js

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { useSortManagerCtx } from "./context";
 import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
 import { sortItemsToSortModel } from "./utils/sort-item-to-sort-model";
-export const SortApply = forwardRef(function SortApply({ slot, ...props }, forwarded) {
+export const SortApply = forwardRef(function SortApply({ as, ...props }, forwarded) {
     const ctx = useSortManagerCtx();
     const onApply = useEvent(() => {
         const lookup = itemsWithIdToMap(ctx.mode ? ctx.grid.state.columnPivotColumns.get() : ctx.grid.state.columns.get());
@@ -15,9 +15,9 @@ export const SortApply = forwardRef(function SortApply({ slot, ...props }, forwa
             ctx.grid.state.sortModel.set(model);
     });
     const renderer = useSlot({
-        props: [props],
+        props: [typeof as !== "function" ? { onClick: onApply } : {}, props],
         ref: forwarded,
-        slot: slot ?? _jsx("button", { onClick: onApply }),
+        slot: as ?? _jsx("button", {}),
         state: { onApply },
     });
     return renderer;

package/dist/sort-manager/sort-cancel.d.ts

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

package/dist/sort-manager/sort-cancel.js

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { useSortManagerCtx } from "./context";
 import { sortModelToSortItems } from "./utils/sort-model-to-sort-items";
 import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
-export const SortCancel = forwardRef(function SortCancel({ slot, ...props }, forwarded) {
+export const SortCancel = forwardRef(function SortCancel({ as, ...props }, forwarded) {
     const ctx = useSortManagerCtx();
     const onCancel = useEvent(() => {
         const model = ctx.mode
@@ -18,9 +18,9 @@ export const SortCancel = forwardRef(function SortCancel({ slot, ...props }, for
             ctx.setSortItems(state);
     });
     const renderer = useSlot({
-        props: [props],
+        props: [typeof as !== "function" ? { onClick: onCancel } : {}, props],
         ref: forwarded,
-        slot: slot ?? _jsx("button", { onClick: onCancel }),
+        slot: as ?? _jsx("button", {}),
         state: { onCancel },
     });
     return renderer;

package/dist/sort-manager/sort-clear.d.ts

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

package/dist/sort-manager/sort-clear.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEvent, useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortManagerCtx } from "./context";
-export const SortClear = forwardRef(function SortClear({ slot, ...props }, forwarded) {
+export const SortClear = forwardRef(function SortClear({ as, ...props }, forwarded) {
     const ctx = useSortManagerCtx();
     const onClear = useEvent(() => {
         if (ctx.mode) {
@@ -13,9 +13,9 @@ export const SortClear = forwardRef(function SortClear({ slot, ...props }, forwa
         }
     });
     const renderer = useSlot({
-        props: [props],
+        props: [typeof as !== "function" ? { onClick: onClear } : {}, props],
         ref: forwarded,
-        slot: slot ?? _jsx("button", { onClick: onClear }),
+        slot: as ?? _jsx("button", {}),
         state: { onClear },
     });
     return renderer;

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

@@ -1,7 +1,7 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { Option } from "./+types";
 export interface SortColumnSelectProps {
-    readonly slot?: SlotComponent<{
+    readonly as?: SlotComponent<{
         options: Option[];
         onSelect: (v: Option | null) => void;
         value: Option | null;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
-export const SortColumnSelect = forwardRef(function SortColumnSelect({ slot, ...props }, forwarded) {
+export const SortColumnSelect = forwardRef(function SortColumnSelect({ as, ...props }, forwarded) {
     const row = useSortRowCtx();
     const el = (_jsxs("select", { "aria-label": "Select column to sort", value: row.columnItem?.value ?? "", onChange: (e) => {
             const item = row.columnOptions.find((c) => c.value === e.target.value);
@@ -13,7 +13,7 @@ export const SortColumnSelect = forwardRef(function SortColumnSelect({ slot, ...
     const renderer = useSlot({
         props: [props],
         ref: forwarded,
-        slot: slot ?? el,
+        slot: as ?? el,
         state: { options: row.columnOptions, onSelect: row.columnOnSelect, value: row.columnSelected },
     });
     return renderer;

package/dist/sort-manager/sort-direction-select.d.ts

@@ -1,7 +1,7 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { Option } from "./+types";
 export interface SortDirectionSelectProps {
-    readonly slot?: SlotComponent<{
+    readonly as?: SlotComponent<{
         options: Option[];
         onSelect: (v: Option | null) => void;
         value: Option | null;

package/dist/sort-manager/sort-direction-select.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
-export const SortDirectionSelect = forwardRef(function SortDirectionSelect({ slot, ...props }, forwarded) {
+export const SortDirectionSelect = forwardRef(function SortDirectionSelect({ as, ...props }, forwarded) {
     const row = useSortRowCtx();
     const el = (_jsx("select", { "aria-label": "Select sort direction", value: row.sortDirectionSelected?.value ?? "", onChange: (e) => {
             const item = row.sortDirectionOptions.find((c) => c.value === e.target.value);
@@ -13,7 +13,7 @@ export const SortDirectionSelect = forwardRef(function SortDirectionSelect({ slo
     const renderer = useSlot({
         props: [props],
         ref: forwarded,
-        slot: slot ?? el,
+        slot: as ?? el,
         state: {
             options: row.sortDirectionOptions,
             onSelect: row.sortDirectionOnSelect,

package/dist/sort-manager/sort-remove.d.ts

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

package/dist/sort-manager/sort-remove.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
-export const SortRemove = forwardRef(function SortRemove({ slot, ...props }, forwarded) {
+export const SortRemove = forwardRef(function SortRemove({ as, ...props }, forwarded) {
     const row = useSortRowCtx();
     const renderer = useSlot({
-        props: [props],
+        props: [typeof as !== "function" ? { onClick: row.onDelete } : {}, props],
         ref: forwarded,
-        slot: slot ?? _jsx("button", { onClick: row.onDelete, children: "x" }),
+        slot: as ?? _jsx("button", { children: "x" }),
         state: { onAdd: row.onDelete },
     });
     return renderer;

package/dist/sort-manager/sort-value-select.d.ts

@@ -1,7 +1,7 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { Option } from "./+types";
 export interface SortValueSelectProps {
-    readonly slot?: SlotComponent<{
+    readonly as?: SlotComponent<{
         options: Option[];
         onSelect: (v: Option | null) => void;
         value: Option | null;

package/dist/sort-manager/sort-value-select.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
-export const SortValueSelect = forwardRef(function SortValueSelect({ slot, ...props }, forwarded) {
+export const SortValueSelect = forwardRef(function SortValueSelect({ as, ...props }, forwarded) {
     const row = useSortRowCtx();
     const el = (_jsxs("select", { "aria-label": "Select sort value", value: row.sortSelected?.value ?? "", onChange: (e) => {
             const item = row.sortOptions.find((c) => c.value === e.target.value);
@@ -13,7 +13,7 @@ export const SortValueSelect = forwardRef(function SortValueSelect({ slot, ...pr
     const renderer = useSlot({
         props: [props],
         ref: forwarded,
-        slot: slot ?? el,
+        slot: as ?? el,
         state: {
             options: row.sortOptions,
             value: row.sortSelected,

package/dist/state/+types.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutMap } from "@1771technologies/lytenyte-shared";
-import type { DataRect, EditActivePosition, GridAtom, GridAtomReadonly, HeaderGroupCellLayout, PositionUnion, VirtualTarget } from "../+types";
+import type { Column, DataRect, EditActivePosition, GridAtom, GridAtomReadonly, HeaderGroupCellLayout, PositionUnion, VirtualTarget } from "../+types";
 import type { Atom, createStore } from "@1771technologies/atom";
 export interface InternalAtoms {
     readonly headerRows: GridAtomReadonly<number>;
@@ -20,6 +20,7 @@ export interface InternalAtoms {
     readonly rowSelectedIds: Atom<Set<string>>;
     readonly rowSelectionPivot: GridAtom<string | null>;
     readonly rowSelectionLastWasDeselect: GridAtom<boolean>;
+    readonly rowGroupColumnState: GridAtom<Record<string, Partial<Column<any>>>>;
     readonly draggingHeader: GridAtom<HeaderGroupCellLayout | null>;
     readonly dialogFrames: GridAtom<Record<string, any>>;
     readonly popoverFrames: GridAtom<Record<string, {

package/dist/state/api/column-update.d.ts

@@ -1,2 +1,5 @@
 import type { Grid, GridApi } from "../../+types";
-export declare const makeColumnUpdate: (grid: Grid<any>) => GridApi<any>["columnUpdate"];
+import type { InternalAtoms } from "../+types";
+export declare const makeColumnUpdate: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["columnUpdate"];

package/dist/state/api/column-update.js

@@ -1,6 +1,19 @@
+import { GROUP_COLUMN_PREFIX } from "@1771technologies/lytenyte-shared";
 export const makeColumnUpdate = (grid) => {
     return (updates) => {
         const columns = [...grid.state.columns.get()];
+        const groupColumns = grid.state.columnMeta
+            .get()
+            .columnsVisible.filter((c) => c.id.startsWith(GROUP_COLUMN_PREFIX));
+        const groupState = { ...grid.internal.rowGroupColumnState.get() };
+        for (let i = 0; i < groupColumns.length; i++) {
+            const column = groupColumns[i];
+            if (updates[column.id]) {
+                const next = { ...groupState[column.id], ...updates[column.id] };
+                groupState[column.id] = next;
+            }
+        }
+        grid.internal.rowGroupColumnState.set(groupState);
         for (let i = 0; i < columns.length; i++) {
             const column = columns[i];
             if (updates[column.id]) {

package/dist/state/helpers/column-add-row-group.d.ts

@@ -4,6 +4,7 @@ interface ColumnHandleGroupColumnArgs<T> {
     readonly rowGroupTemplate: RowGroupColumn<T>;
     readonly rowGroupModel: RowGroupModelItem<T>[];
     readonly rowGroupDisplayMode: RowGroupDisplayMode;
+    readonly rowGroupColumnState: Record<string, Partial<Column<T>>>;
 }
-export declare function columnAddRowGroup<T>({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, }: ColumnHandleGroupColumnArgs<T>): Column<T>[];
+export declare function columnAddRowGroup<T>({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, rowGroupColumnState, }: ColumnHandleGroupColumnArgs<T>): Column<T>[];
 export {};

package/dist/state/helpers/column-add-row-group.js

@@ -10,7 +10,7 @@ const baseGroup = {
         return d.data.key;
     },
 };
-export function columnAddRowGroup({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, }) {
+export function columnAddRowGroup({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, rowGroupColumnState, }) {
     const lookup = itemsWithIdToMap(columns);
     rowGroupModel.forEach((c) => {
         if (typeof c === "string")
@@ -62,5 +62,12 @@ export function columnAddRowGroup({ columns, rowGroupModel, rowGroupDisplayMode,
     }
     if (!hasGroupColumn)
         columns = columns.filter((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX));
+    const keys = Object.keys(rowGroupColumnState);
+    for (let i = 0; i < keys.length; i++) {
+        if (!lookup.has(keys[i]))
+            continue;
+        const column = lookup.get(keys[i]);
+        Object.assign(column, rowGroupColumnState[keys[i]]);
+    }
     return columns;
 }

package/dist/state/use-lytenyte.js

@@ -132,6 +132,7 @@ export function makeLyteNyte(p) {
     const columnPivotRowGroupExpansions = atom({});
     const cellSelections = atom(p.cellSelections ?? []);
     const cellSelectionMode = atom(p.cellSelectionMode ?? "none");
+    const internal__rowGroupColumnState = atom({});
     const internal_cellSelectionPivot = atom(null);
     const internal_cellSelectionAdditive = atom(null);
     const internal_cellSelectionSplits = atom((g) => {
@@ -220,6 +221,7 @@ export function makeLyteNyte(p) {
      * is impacted by the column definitions, the group expansions, the row group display mode.
      */
     const columnView = atom((g) => {
+        const groupState = g(internal__rowGroupColumnState);
         const pivotMode = g(columnPivotMode);
         let cols;
         if (pivotMode) {
@@ -229,6 +231,7 @@ export function makeLyteNyte(p) {
                 rowGroupDisplayMode: "single-column",
                 rowGroupModel: model.rows.filter((c) => c.active ?? true).map((c) => c.field),
                 rowGroupTemplate: g(rowGroupColumn),
+                rowGroupColumnState: groupState,
             });
         }
         else {
@@ -237,6 +240,7 @@ export function makeLyteNyte(p) {
                 rowGroupDisplayMode: g(rowGroupDisplayMode),
                 rowGroupModel: g(rowGroupModel),
                 rowGroupTemplate: g(rowGroupColumn),
+                rowGroupColumnState: groupState,
             });
         }
         const colsWithMarker = columnHandleMarker({
@@ -543,6 +547,7 @@ export function makeLyteNyte(p) {
             cellSelectionAdditiveRects: makeGridAtom(internal_cellSelectionAdditive, store),
             cellSelectionIsDeselect: makeGridAtom(atom(false), store),
             cellSelectionSplits: makeGridAtom(internal_cellSelectionSplits, store),
+            rowGroupColumnState: makeGridAtom(internal__rowGroupColumnState, store),
             store: store,
         },
     });

package/dist/tree-view/leaf.js

@@ -13,6 +13,7 @@ export const TreeLeaf = forwardRef(function TreeLeaf({ itemId, ...props }, forwa
                 e.ctrlKey ||
                 e.shiftKey)
                 return;
+            e.preventDefault();
             const nodes = getFocusables(e.currentTarget);
             const index = nodes.indexOf(document.activeElement);
             if (index === -1) {

package/package.json

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