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

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,12 +5,13 @@ 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();
     const defaultProps = {
         role: "button",
+        "data-ln-header-resizer": "true",
         "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
         tabIndex: -1,
         onDoubleClick: () => {
@@ -56,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");
@@ -71,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;
@@ -112,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,
@@ -122,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/header/use-drag-move.d.ts

@@ -1,6 +1,6 @@
-import type { Grid, HeaderCellFloating, HeaderCellLayout, HeaderGroupCellLayout } from "../+types";
+import type { Grid, HeaderCellFloating, HeaderCellLayout, HeaderGroupCellLayout } from "../+types.js";
 import { type JSX } from "react";
-import type { InternalAtoms } from "../state/+types";
+import type { InternalAtoms } from "../state/+types.js";
 export declare function useDragMove<T>(grid: Grid<T> & {
     internal: InternalAtoms;
 }, cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>, onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"]): {

package/dist/header/use-drag-move.js

@@ -1,4 +1,4 @@
-import { getHoveredColumnIndex, getNearestFocusable, useDraggable, } from "@1771technologies/lytenyte-shared";
+import { COLUMN_MARKER_ID, getHoveredColumnIndex, getNearestFocusable, GROUP_COLUMN_PREFIX, useDraggable, } from "@1771technologies/lytenyte-shared";
 import { useMemo, useRef } from "react";
 export function useDragMove(grid, cell, onDragStart) {
     const ctx = grid.state;
@@ -12,7 +12,9 @@ export function useDragMove(grid, cell, onDragStart) {
         return columns;
     }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
     const isMovable = useMemo(() => {
-        return columns.every((c) => c.uiHints?.movable ?? base.uiHints?.movable ?? false);
+        return columns.every((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX) &&
+            c.id !== COLUMN_MARKER_ID &&
+            (c.uiHints?.movable ?? base.uiHints?.movable ?? false));
     }, [base.uiHints?.movable, columns]);
     const swapDirection = useRef(null);
     const swapIndex = useRef(-1);
@@ -53,6 +55,11 @@ export function useDragMove(grid, cell, onDragStart) {
             });
             if (index == null)
                 return;
+            const columnTarget = grid.api.columnFromIndex(index);
+            if (columnTarget) {
+                if (columnTarget.id === COLUMN_MARKER_ID || columnTarget.id.startsWith(GROUP_COLUMN_PREFIX))
+                    return;
+            }
             const first = columns[0];
             const currentIndex = grid.api.columnIndex(first);
             const columnIndices = columns.map((c) => grid.api.columnIndex(c));

package/dist/header/use-header-cell-renderer.js

@@ -18,16 +18,16 @@ export function useHeaderCellRenderer(cell) {
                 return renderer;
         }
         else {
-            const renderer = cell.column.floatingRenderer ?? base.floatingRenderer ?? DefaultRenderer;
+            const renderer = cell.column.floatingCellRenderer ?? base.floatingCellRenderer ?? DefaultRenderer;
             if (typeof renderer === "string")
                 return floatingRenderers[renderer] ?? DefaultRenderer;
             else
                 return renderer;
         }
     }, [
-        base.floatingRenderer,
+        base.floatingCellRenderer,
         base.headerRenderer,
-        cell.column.floatingRenderer,
+        cell.column.floatingCellRenderer,
         cell.column.headerRenderer,
         cell.kind,
         floatingRenderers,

package/dist/icons/index.d.ts

@@ -0,0 +1 @@
+export { AddIcon, AddSmallIcon, AggregateIcon, AggregationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightCurvedIcon, ArrowRightIcon, ArrowUpIcon, AutosizeIcon, BackIcon, BookmarkIcon, BooleanIcon, CalendarIcon, ChartIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Close2Icon, CloseIcon, CollapseGroupIcon, Columns2Icon, ColumnsIcon, CopyIcon, CornerRadiusIcon, CustomizeThemeIcon, CutIcon, CsvIcon, DeleteIcon, DocsIcon, DownloadIcon, Drag2Icon, DragDotsIcon, DragDotsSmallIcon, DragIcon, DuplicateIcon, EditIcon, EmailIcon, ExcelIcon, ExpandGroupIcon, ExpandIcon, Expression2Icon, ExpressionIcon, ExternalLinkIcon, File2Icon, FileIcon, FilterIcon, FolderIcon, GlobeIcon, GridViewIcon, GroupByColIcon, HamburgerIcon, HelpIcon, HiddenIcon, HistoryIcon, ImportIcon, LinkIcon, ListViewIcon, LoadingIcon, LocationIcon, ModalIcon, MoreIcon, MoreVerticalIcon, MultilineIcon, NumberIcon, PasteIcon, PieIcon, PinColumnIcon, RefreshIcon, SearchIcon, SettingsIcon, ShareIcon, SingleLineIcon, Sort2Icon, SortIcon, SpacingHIcon, SpacingIcon, StickColumnIcon, SwapIcon, TagIcon, TaskIcon, TextIcon, ThemesIcon, Tickmark2Icon, TickmarkIcon, TimeIcon, UploadIcon, UserIcon, ViewIcon, } from "@1771technologies/lytenyte-core/icons";

package/dist/icons/index.js

@@ -0,0 +1 @@
+export { AddIcon, AddSmallIcon, AggregateIcon, AggregationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightCurvedIcon, ArrowRightIcon, ArrowUpIcon, AutosizeIcon, BackIcon, BookmarkIcon, BooleanIcon, CalendarIcon, ChartIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Close2Icon, CloseIcon, CollapseGroupIcon, Columns2Icon, ColumnsIcon, CopyIcon, CornerRadiusIcon, CustomizeThemeIcon, CutIcon, CsvIcon, DeleteIcon, DocsIcon, DownloadIcon, Drag2Icon, DragDotsIcon, DragDotsSmallIcon, DragIcon, DuplicateIcon, EditIcon, EmailIcon, ExcelIcon, ExpandGroupIcon, ExpandIcon, Expression2Icon, ExpressionIcon, ExternalLinkIcon, File2Icon, FileIcon, FilterIcon, FolderIcon, GlobeIcon, GridViewIcon, GroupByColIcon, HamburgerIcon, HelpIcon, HiddenIcon, HistoryIcon, ImportIcon, LinkIcon, ListViewIcon, LoadingIcon, LocationIcon, ModalIcon, MoreIcon, MoreVerticalIcon, MultilineIcon, NumberIcon, PasteIcon, PieIcon, PinColumnIcon, RefreshIcon, SearchIcon, SettingsIcon, ShareIcon, SingleLineIcon, Sort2Icon, SortIcon, SpacingHIcon, SpacingIcon, StickColumnIcon, SwapIcon, TagIcon, TaskIcon, TextIcon, ThemesIcon, Tickmark2Icon, TickmarkIcon, TimeIcon, UploadIcon, UserIcon, ViewIcon, } from "@1771technologies/lytenyte-core/icons";

package/dist/index.d.ts

@@ -4,3 +4,8 @@ export { FilterTree } from "./filter-tree/filter-tree.js";
 export { ColumnManager } from "./column-manager/column-manager.js";
 export { GridBox } from "./grid-box/grid-box.js";
 export { activateLicense } from "./license.js";
+export { measureText } from "@1771technologies/lytenyte-shared";
+export { makeClientDataSource, useClientRowDataSource, } from "./row-data-source-client/use-client-data-source";
+export { makeClientDataSourcePaginated, useClientRowDataSourcePaginated, } from "./row-data-source-client/use-client-data-source-paginated";
+export { makeClientTreeDataSource, useClientTreeDataSource, } from "./row-data-source-client/use-client-tree-data-source";
+export { makeServerDataSource, useServerDataSource, } from "./row-data-source-server/use-server-data-source";

package/dist/index.js

@@ -4,3 +4,8 @@ export { FilterTree } from "./filter-tree/filter-tree.js";
 export { ColumnManager } from "./column-manager/column-manager.js";
 export { GridBox } from "./grid-box/grid-box.js";
 export { activateLicense } from "./license.js";
+export { measureText } from "@1771technologies/lytenyte-shared";
+export { makeClientDataSource, useClientRowDataSource, } from "./row-data-source-client/use-client-data-source";
+export { makeClientDataSourcePaginated, useClientRowDataSourcePaginated, } from "./row-data-source-client/use-client-data-source-paginated";
+export { makeClientTreeDataSource, useClientTreeDataSource, } from "./row-data-source-client/use-client-tree-data-source";
+export { makeServerDataSource, useServerDataSource, } from "./row-data-source-server/use-server-data-source";

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/built-ins/built-ins.d.ts

@@ -10,7 +10,7 @@ import { sum } from "./sum.js";
  * Collection of built-in array utility functions for numerical and statistical operations.
  * Each function handles null and undefined values gracefully.
  * @example
- * import { builtIns } from './builtIns';
+ * import { builtIns } from './builtIns.js';
  *
  * const data = [1, null, 3, 2];
  * builtIns.sum(data);  // Returns 6

package/dist/row-data-source-client/built-ins/built-ins.js

@@ -10,7 +10,7 @@ import { sum } from "./sum.js";
  * Collection of built-in array utility functions for numerical and statistical operations.
  * Each function handles null and undefined values gracefully.
  * @example
- * import { builtIns } from './builtIns';
+ * import { builtIns } from './builtIns.js';
  *
  * const data = [1, null, 3, 2];
  * builtIns.sum(data);  // Returns 6

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/row-data-source-client/pivots/create-pivot-columns.js

@@ -1,5 +1,5 @@
-import { createColumnPivotsFromPaths } from "./create-pivot-columns-from-paths";
-import { createPivotTree } from "./create-pivot-tree";
+import { createColumnPivotsFromPaths } from "./create-pivot-columns-from-paths.js";
+import { createPivotTree } from "./create-pivot-tree.js";
 export function createPivotColumns(model, lookup, grid, leafRows) {
     const activeColumns = model.columns.filter((c) => lookup.has(c.field) && (c.active ?? true));
     const activeValues = model.values.filter((c) => lookup.has(c.field) && (c.active ?? true));

package/dist/row-data-source-client/tree/evaluator-aggregation.d.ts

@@ -1,2 +1,2 @@
-import type { AggregationItem } from "../+types";
+import type { AggregationItem } from "../+types.js";
 export declare function aggregationEvaluator<Data>(agg: AggregationItem<Data>[], data: Data[]): Record<string, unknown>;

package/dist/row-data-source-client/tree/evaluator-group.d.ts

@@ -1,2 +1,2 @@
-import type { GroupItem } from "../+types";
+import type { GroupItem } from "../+types.js";
 export declare function groupEvaluator<Data>(g: GroupItem<Data>[] | ((d: Data) => (string | null | undefined)[]), d: Data): (string | null | undefined)[];

package/dist/row-data-source-client/tree/traverse.d.ts

@@ -1,2 +1,2 @@
-import type { BranchNode, Root, TreeNode } from "../+types";
+import type { BranchNode, Root, TreeNode } from "../+types.js";
 export declare function traverse<Data>(root: Root<Data> | BranchNode<Data>, fn: (node: TreeNode<Data>, lookupKey: string | null) => boolean | void, comparator?: (l: TreeNode<Data>, r: TreeNode<Data>) => number): void;

package/dist/row-data-source-client/tree/traverse.js

@@ -1,4 +1,4 @@
-import { LEAF } from "../+constants";
+import { LEAF } from "../+constants.js";
 export function traverse(root, fn, comparator) {
     const entries = root instanceof Map ? root.entries() : root.children.entries();
     const stack = [...entries];

package/dist/row-data-source-client/use-client-data-source-paginated.d.ts

@@ -1,5 +1,5 @@
-import type { GridAtom, RowDataSourceClientPaginated } from "../+types";
-import { type ClientRowDataSourceParams } from "../+types";
+import type { GridAtom, RowDataSourceClientPaginated } from "../+types.js";
+import { type ClientRowDataSourceParams } from "../+types.js";
 interface DataAtoms<T> {
     readonly top: GridAtom<T[]>;
     readonly center: GridAtom<T[]>;

package/dist/row-data-source-client/use-client-data-source-paginated.js

@@ -1,12 +1,12 @@
-import {} from "../+types";
+import {} from "../+types.js";
 import { useRef } from "react";
 import { atom, createStore } from "@1771technologies/atom";
-import { traverse } from "./tree/traverse";
+import { traverse } from "./tree/traverse.js";
 import { dateComparator, makeGridAtom, numberComparator, stringComparator, } from "@1771technologies/lytenyte-shared";
 import { clamp, equal, get } from "@1771technologies/lytenyte-js-utils";
-import { makeClientTree } from "./tree/client-tree";
-import { computeFilteredRows } from "./filter/compute-filtered-rows";
-import { builtIns } from "./built-ins/built-ins";
+import { makeClientTree } from "./tree/client-tree.js";
+import { computeFilteredRows } from "./filter/compute-filtered-rows.js";
+import { builtIns } from "./built-ins/built-ins.js";
 export function makeClientDataSourcePaginated(p) {
     const rdsStore = createStore();
     const pageInternal = atom(0);
@@ -19,6 +19,9 @@ export function makeClientDataSourcePaginated(p) {
     const data = atom(p.data);
     const topData = atom(p.topData ?? []);
     const bottomData = atom(p.bottomData ?? []);
+    const dataToSrc$ = atom((g) => {
+        return new Map(g(data).map((c, i) => [c, i]));
+    });
     const cache = new Map();
     const centerNodes = atom((g) => {
         const nodes = [];
@@ -149,6 +152,13 @@ export function makeClientDataSourcePaginated(p) {
         };
         return comparator;
     });
+    const idToNode = atom((g) => {
+        const map = new Map();
+        traverse(g(tree).root, (node) => {
+            map.set(node.id, node);
+        });
+        return map;
+    });
     const initialized = atom(false);
     const flat = atom((g) => {
         if (!g(initialized))
@@ -299,30 +309,32 @@ export function makeClientDataSourcePaginated(p) {
     };
     const rowUpdate = (updates) => {
         const grid = rdsStore.get(grid$);
-        const t = rdsStore.get(tree);
         const d = rdsStore.get(data);
-        for (const [key, data] of updates.entries()) {
-            const rowIndex = typeof key === "number" ? key : rowToIndex(key);
-            const row = rowByIndex(rowIndex);
-            if (!row || !grid) {
-                console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+        const idMap = rdsStore.get(idToNode);
+        const dataToSrc = rdsStore.get(dataToSrc$);
+        for (const [key, next] of updates.entries()) {
+            const row = typeof key === "string" ? rowById(key) : rowByIndex(key);
+            const treeNode = typeof key === "string" ? idMap.get(key) : null;
+            if ((!row && !treeNode) || !grid) {
+                console.error(`Failed to find the row with identifier ${key} which is being updated.`);
                 continue;
             }
-            if (row.kind === "branch") {
-                row.data = data;
+            if (row?.kind === "branch") {
+                row.data = next;
             }
             else {
-                const source = t.idToSourceIndex.get(row.id);
+                const data = row?.kind === "leaf" ? row.data : treeNode?.data.data;
+                const source = dataToSrc.get(data);
                 if (source == null) {
-                    console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+                    console.error(`Failed to find the row with identifier ${key} which is being updated.`);
                     continue;
                 }
-                d[source] = data;
+                d[source] = next;
             }
-            grid.state.rowDataStore.rowInvalidateIndex(rowIndex);
         }
         rdsStore.set(data, [...d]);
         rdsStore.set(snapshot, (prev) => prev + 1);
+        grid.state.rowDataStore.rowClearCache();
     };
     const rowToIndex = (rowId) => {
         const f = rdsStore.get(flat);
@@ -375,11 +387,10 @@ export function makeClientDataSourcePaginated(p) {
                     const field = grid.api.columnField(c, row);
                     return field;
                 }));
-                return [...values].map((x) => {
-                    if (!p.transformInFilterItem)
-                        return { id: `${x}`, label: `${x}`, value: x };
-                    return p.transformInFilterItem({ field: x, column: c });
-                });
+                if (p.transformInFilterItem) {
+                    return p.transformInFilterItem({ column: c, values: [...values] });
+                }
+                return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
             },
             rowAreAllSelected: (rowId) => {
                 const g = rdsStore.get(grid$);
@@ -436,11 +447,29 @@ export function makeClientDataSourcePaginated(p) {
                 const grid = rdsStore.get(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
+            rowSetCenterData: (d) => {
+                rdsStore.set(data, d);
+                const grid = rdsStore.get(grid$);
+                grid?.state.rowDataStore.rowClearCache();
+            },
             rowSetTopData: (data) => {
                 rdsStore.set(topData, data);
                 const grid = rdsStore.get(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
+            rowData: (section) => {
+                const d = [];
+                if (section === "top" || section === "flat") {
+                    d.push(...rdsStore.get(topData));
+                }
+                if (section === "center" || section === "flat") {
+                    d.push(...rdsStore.get(data));
+                }
+                if (section === "bottom" || section === "flat") {
+                    d.push(...rdsStore.get(bottomData));
+                }
+                return d;
+            },
             rowExpand: (expansions) => {
                 const grid = rdsStore.get(grid$);
                 if (!grid)
@@ -527,12 +556,12 @@ export function useClientRowDataSourcePaginated(p) {
     if (p.reflectData) {
         // Need to queue the microtask since it we cannot update state during render.
         if (p.data !== da.center.get())
-            queueMicrotask(() => da.center.set(p.data));
+            queueMicrotask(() => ds.current.rowSetCenterData(p.data));
         if (!equal(p.topData ?? [], da.top.get())) {
-            queueMicrotask(() => da.top.set(p.topData ?? []));
+            queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
         }
         if (!equal(p.bottomData ?? [], da.bottom.get()))
-            queueMicrotask(() => da.bottom.set(p.bottomData ?? []));
+            queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
     }
     return ds.current;
 }

package/dist/row-data-source-client/use-client-data-source.d.ts

@@ -1,5 +1,5 @@
-import type { GridAtom, RowDataSourceClient } from "../+types";
-import { type ClientRowDataSourceParams } from "../+types";
+import type { GridAtom, RowDataSourceClient } from "../+types.js";
+import { type ClientRowDataSourceParams } from "../+types.js";
 interface DataAtoms<T> {
     readonly top: GridAtom<T[]>;
     readonly center: GridAtom<T[]>;

package/dist/row-data-source-client/use-client-data-source.js

@@ -1,19 +1,22 @@
-import {} from "../+types";
+import {} from "../+types.js";
 import { useRef } from "react";
 import { atom, createStore } from "@1771technologies/atom";
-import { traverse } from "./tree/traverse";
+import { traverse } from "./tree/traverse.js";
 import { dateComparator, makeGridAtom, numberComparator, stringComparator, } from "@1771technologies/lytenyte-shared";
 import { equal, get, itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
-import { makeClientTree } from "./tree/client-tree";
-import { computeFilteredRows } from "./filter/compute-filtered-rows";
-import { builtIns } from "./built-ins/built-ins";
-import { createPivotColumns } from "./pivots/create-pivot-columns";
-import { createAggModel } from "./pivots/create-agg-model";
+import { computeFilteredRows } from "./filter/compute-filtered-rows.js";
+import { builtIns } from "./built-ins/built-ins.js";
+import { createPivotColumns } from "./pivots/create-pivot-columns.js";
+import { createAggModel } from "./pivots/create-agg-model.js";
+import { makeClientTree } from "./tree/client-tree.js";
 export function makeClientDataSource(p) {
     const rdsStore = createStore();
     const data = atom(p.data);
     const topData = atom(p.topData ?? []);
     const bottomData = atom(p.bottomData ?? []);
+    const dataToSrc$ = atom((g) => {
+        return new Map(g(data).map((c, i) => [c, i]));
+    });
     const cache = new Map();
     const centerNodes = atom((g) => {
         const nodes = [];
@@ -199,6 +202,13 @@ export function makeClientDataSource(p) {
         };
         return comparator;
     });
+    const idToNode = atom((g) => {
+        const map = new Map();
+        traverse(g(tree).root, (node) => {
+            map.set(node.id, node);
+        });
+        return map;
+    });
     const tree = atom((g) => (g(columnPivotMode) ? g(pivotTree) : g(normalTree)));
     const initialized = atom(false);
     const flatPivot = atom((g) => {
@@ -429,30 +439,32 @@ export function makeClientDataSource(p) {
     };
     const rowUpdate = (updates) => {
         const grid = rdsStore.get(grid$);
-        const t = rdsStore.get(normalTree);
         const d = rdsStore.get(data);
-        for (const [key, data] of updates.entries()) {
-            const rowIndex = typeof key === "number" ? key : rowToIndex(key);
-            const row = rowByIndex(rowIndex);
-            if (!row || !grid) {
-                console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+        const idMap = rdsStore.get(idToNode);
+        const dataToSrc = rdsStore.get(dataToSrc$);
+        for (const [key, next] of updates.entries()) {
+            const row = typeof key === "string" ? rowById(key) : rowByIndex(key);
+            const treeNode = typeof key === "string" ? idMap.get(key) : null;
+            if ((!row && !treeNode) || !grid) {
+                console.error(`Failed to find the row with identifier ${key} which is being updated.`);
                 continue;
             }
-            if (row.kind === "branch") {
-                row.data = data;
+            if (row?.kind === "branch") {
+                row.data = next;
             }
             else {
-                const source = t.idToSourceIndex.get(row.id);
+                const data = row?.kind === "leaf" ? row.data : treeNode?.data.data;
+                const source = dataToSrc.get(data);
                 if (source == null) {
-                    console.error(`Failed to find the row at index ${rowIndex} which is being updated.`);
+                    console.error(`Failed to find the row with identifier ${key} which is being updated.`);
                     continue;
                 }
-                d[source] = data;
+                d[source] = next;
             }
-            grid.state.rowDataStore.rowInvalidateIndex(rowIndex);
         }
         rdsStore.set(data, [...d]);
         rdsStore.set(snapshot, (prev) => prev + 1);
+        grid.state.rowDataStore.rowClearCache();
     };
     const rowToIndex = (rowId) => {
         const f = rdsStore.get(flat);
@@ -500,11 +512,10 @@ export function makeClientDataSource(p) {
                     const field = grid.api.columnField(c, row);
                     return field;
                 }));
-                return [...values].map((x) => {
-                    if (!p.transformInFilterItem)
-                        return { id: `${x}`, label: `${x}`, value: x };
-                    return p.transformInFilterItem({ field: x, column: c });
-                });
+                if (p.transformInFilterItem) {
+                    return p.transformInFilterItem({ column: c, values: [...values] });
+                }
+                return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
             },
             rowAdd: (newRows, place = "end") => {
                 rdsStore.set(data, (prev) => {
@@ -546,11 +557,29 @@ export function makeClientDataSource(p) {
                 const grid = rdsStore.get(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
+            rowSetCenterData: (d) => {
+                rdsStore.set(data, d);
+                const grid = rdsStore.get(grid$);
+                grid?.state.rowDataStore.rowClearCache();
+            },
             rowSetTopData: (data) => {
                 rdsStore.set(topData, data);
                 const grid = rdsStore.get(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
+            rowData: (section) => {
+                const d = [];
+                if (section === "top" || section === "flat") {
+                    d.push(...rdsStore.get(topData));
+                }
+                if (section === "center" || section === "flat") {
+                    d.push(...rdsStore.get(data));
+                }
+                if (section === "bottom" || section === "flat") {
+                    d.push(...rdsStore.get(bottomData));
+                }
+                return d;
+            },
             rowExpand: (expansions) => {
                 const grid = rdsStore.get(grid$);
                 if (!grid)
@@ -656,12 +685,12 @@ export function useClientRowDataSource(p) {
     if (p.reflectData) {
         // Need to queue the microtask since it we cannot update state during render.
         if (p.data !== da.center.get())
-            queueMicrotask(() => da.center.set(p.data));
+            queueMicrotask(() => ds.current.rowSetCenterData(p.data));
         if (!equal(p.topData ?? [], da.top.get())) {
-            queueMicrotask(() => da.top.set(p.topData ?? []));
+            queueMicrotask(() => ds.current.rowSetTopData(p.topData ?? []));
         }
         if (!equal(p.bottomData ?? [], da.bottom.get()))
-            queueMicrotask(() => da.bottom.set(p.bottomData ?? []));
+            queueMicrotask(() => ds.current.rowSetBotData(p.bottomData ?? []));
     }
     return ds.current;
 }

package/dist/row-data-source-client/use-client-tree-data-source.d.ts

@@ -1,4 +1,4 @@
-import type { GridAtom, RowDataSourceClient, ClientTreeDataSourceParams } from "../+types";
+import type { GridAtom, RowDataSourceClient, ClientTreeDataSourceParams } from "../+types.js";
 interface DataAtoms<T> {
     readonly top: GridAtom<T[]>;
     readonly center: GridAtom<T[]>;