@1771technologies/lytenyte-pro 1.0.1 → 1.0.3

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

@@ -1,25 +1,23 @@
-import { atom, createStore } from "@1771technologies/atom";
 import { useRef } from "react";
 import { makeAsyncTree } from "./async-tree/make-async-tree.js";
-import { makeGridAtom } from "@1771technologies/lytenyte-shared";
 import { getNodeDepth } from "./utils/get-node-depth.js";
 import { getRequestId } from "./utils/get-request-id.js";
 import { RangeTree } from "./range-tree/range-tree.js";
 import { getNodePath } from "./utils/get-node-path.js";
 import { equal } from "@1771technologies/lytenyte-js-utils";
+import { computed, effect, makeAtom, peek, signal } from "@1771technologies/lytenyte-shared";
 export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, dataInFilterItemFetcher, cellUpdateHandler, cellUpdateOptimistically = true, blockSize = 200, }) {
     let grid = null;
-    const snapshot$ = atom(Date.now());
-    const rdsStore = createStore();
-    const tree$ = atom(makeAsyncTree());
-    const tree = makeGridAtom(tree$, rdsStore);
-    const isLoading$ = atom(false);
-    const isLoading = makeGridAtom(isLoading$, rdsStore);
-    const error$ = atom();
-    const loadError = makeGridAtom(error$, rdsStore);
-    const nodesWithError = atom(new Map());
-    const initialized = atom(false);
-    const model$ = atom({
+    const snapshot$ = signal(Date.now());
+    const tree$ = signal(makeAsyncTree());
+    const tree = makeAtom(tree$);
+    const isLoading$ = signal(false);
+    const isLoading = makeAtom(isLoading$);
+    const error$ = signal(null);
+    const loadError = makeAtom(error$);
+    const nodesWithError = signal(new Map());
+    const initialized = signal(false);
+    const model$ = signal({
         sorts: [],
         filters: {},
         filtersIn: {},
@@ -38,12 +36,12 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             values: [],
         },
     });
-    const model = makeGridAtom(model$, rdsStore);
-    const pivotGroupExpansions = atom((g) => g(model$).pivotGroupExpansions);
-    const rowGroupExpansions = atom((g) => g(model$).groupExpansions);
-    const pivotMode = atom((g) => g(model$).pivotMode);
-    const topData = atom([]);
-    const botData = atom([]);
+    const model = makeAtom(model$);
+    const pivotGroupExpansions = computed(() => model$().pivotGroupExpansions);
+    const rowGroupExpansions = computed(() => model$().groupExpansions);
+    const pivotMode = computed(() => model$().pivotMode);
+    const topData = signal([]);
+    const botData = signal([]);
     const seenRequests = new Set();
     const dataResponseHandler = (res) => {
         const t = tree.get();
@@ -56,10 +54,10 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
         });
         pinResponses.forEach((p) => {
             if (p.kind === "top") {
-                rdsStore.set(topData, p.data);
+                topData.set(p.data);
             }
             else {
-                rdsStore.set(botData, p.data);
+                botData.set(p.data);
             }
         });
         dataResponses.forEach((r) => {
@@ -96,7 +94,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             onSuccess?.();
             return;
         }
-        rdsStore.set(nodesWithError, (prev) => {
+        nodesWithError.set((prev) => {
             const next = new Map(prev);
             p.forEach((r) => {
                 for (let i = r.rowStartIndex; i < r.rowEndIndex; i++) {
@@ -122,7 +120,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             console.error(e);
         }
         finally {
-            rdsStore.set(snapshot$, Date.now());
+            snapshot$.set(Date.now());
             grid.state.rowDataStore.rowClearCache();
         }
     };
@@ -177,7 +175,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             });
         }
         dataRequestHandler(requests, false, () => { }, (e) => {
-            rdsStore.set(nodesWithError, (prev) => {
+            nodesWithError.set((prev) => {
                 const next = new Map(prev);
                 requests.forEach((r) => {
                     for (let i = r.rowStartIndex; i < r.rowEndIndex; i++) {
@@ -191,7 +189,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
     const resetRequest = async () => {
         seenRequests.clear();
         tree.set(makeAsyncTree());
-        rdsStore.set(nodesWithError, new Map());
+        nodesWithError.set(new Map());
         // Initialize the grid.
         const initialDataRequest = {
             path: [],
@@ -208,11 +206,11 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
         });
         isLoading.set(false);
     };
-    const flat$ = atom((g) => {
-        g(snapshot$);
-        const mode = rdsStore.get(pivotMode);
-        const expansions = mode ? g(pivotGroupExpansions) : g(rowGroupExpansions);
-        const t = g(tree$);
+    const flat$ = computed(() => {
+        snapshot$();
+        const mode = pivotMode();
+        const expansions = mode ? pivotGroupExpansions() : rowGroupExpansions();
+        const t = tree$();
         const rowIdToRow = new Map();
         const rowIndexToRow = new Map();
         const rowIdToRowIndex = new Map();
@@ -244,7 +242,10 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             rangeTree,
         };
     });
-    const flat = makeGridAtom(flat$, rdsStore);
+    const flat = makeAtom(flat$);
+    const topLength = computed(() => topData().length);
+    const botLength = computed(() => botData().length);
+    const flatLength = computed(() => flat.$().size);
     const cleanup = [];
     const init = (g) => {
         grid = g;
@@ -258,7 +259,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
         const pivotMode = g.state.columnPivotMode.get();
         const pivotModel = g.state.columnPivotModel.get();
         const pivotGroupExpansions = g.state.columnPivotRowGroupExpansions.get();
-        rdsStore.set(model$, {
+        model$.set({
             sorts,
             filters,
             filtersIn,
@@ -270,25 +271,24 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             pivotModel,
             pivotGroupExpansions,
         });
-        rdsStore.set(initialized, true);
+        initialized.set(true);
         // Handle row count changes
         const f = flat.get();
         g.state.rowDataStore.rowCenterCount.set(f.size);
-        g.state.rowDataStore.rowBottomCount.set(rdsStore.get(botData).length);
-        g.state.rowDataStore.rowTopCount.set(rdsStore.get(topData).length);
-        rdsStore.sub(flat$, () => {
-            const f = flat.get();
-            g.state.rowDataStore.rowCenterCount.set(f.size);
+        g.state.rowDataStore.rowBottomCount.set(peek(botData).length);
+        g.state.rowDataStore.rowTopCount.set(peek(topData).length);
+        cleanup.push(effect(() => {
+            g.state.rowDataStore.rowCenterCount.set(flatLength());
             viewChange();
-        });
-        rdsStore.sub(topData, () => {
-            g.state.rowDataStore.rowTopCount.set(rdsStore.get(topData).length);
+        }));
+        cleanup.push(effect(() => {
+            g.state.rowDataStore.rowTopCount.set(topLength());
             g.state.rowDataStore.rowClearCache();
-        });
-        rdsStore.sub(botData, () => {
-            g.state.rowDataStore.rowBottomCount.set(rdsStore.get(botData).length);
+        }));
+        cleanup.push(effect(() => {
+            g.state.rowDataStore.rowBottomCount.set(botLength);
             g.state.rowDataStore.rowClearCache();
-        });
+        }));
         resetRequest();
         // Watch the view bound changes.
         g.state.viewBounds.watch(() => {
@@ -314,78 +314,60 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
         };
         if (pivotMode)
             updatePivotColumns(pivotModel);
-        // Make these deep equality checks
-        cleanup.push(g.state.columnPivotMode.watch(() => {
-            const model = g.state.columnPivotModel.get();
-            updatePivotColumns(model, true);
-            rdsStore.set(model$, (prev) => ({ ...prev, pivotMode: g.state.columnPivotMode.get() }));
-            g.state.rowDataStore.rowClearCache();
-        }));
-        cleanup.push(g.state.columnPivotModel.watch(() => {
-            const model = g.state.columnPivotModel.get();
+        let prevModel = peek(model$);
+        effect(() => {
+            // @ts-expect-error this is fine
+            const rowGroupModel = g.state.rowGroupModel.$();
+            // @ts-expect-error this is fine
+            const rowGroupExpansions = g.state.rowGroupExpansions.$();
+            // @ts-expect-error this is fine
+            const aggModel = g.state.aggModel.$();
+            // @ts-expect-error this is fine
+            const filterModelIn = g.state.filterInModel.$();
+            // @ts-expect-error this is fine
+            const quickSearch = g.state.quickSearch.$();
+            // @ts-expect-error this is fine
+            const filterModel = g.state.filterModel.$();
+            // @ts-expect-error this is fine
+            const sortModel = g.state.sortModel.$();
+            // @ts-expect-error this is fine
+            const columnPivotExpansions = g.state.columnPivotColumnGroupExpansions.$();
+            // @ts-expect-error this is fine
+            const model = g.state.columnPivotModel.$();
+            // @ts-expect-error this is fine
+            const mode = g.state.columnPivotMode.$();
             updatePivotColumns(model);
-            rdsStore.set(model$, (prev) => ({
-                ...prev,
+            const newModel = {
+                aggregations: aggModel,
+                filters: filterModel,
+                filtersIn: filterModelIn,
+                group: rowGroupModel,
+                groupExpansions: rowGroupExpansions,
+                quickSearch,
+                pivotGroupExpansions: columnPivotExpansions,
+                pivotMode: mode,
                 pivotModel: model,
-            }));
-            g.state.rowDataStore.rowClearCache();
-        }));
-        g.state.columnPivotRowGroupExpansions.watch(() => {
-            rdsStore.set(model$, (prev) => ({
-                ...prev,
-                columnPivotGroupExpansions: g.state.columnPivotRowGroupExpansions.get(),
-            }));
-            grid?.state.rowDataStore.rowClearCache();
-        });
-        // Sort model monitoring
-        cleanup.push(g.state.sortModel.watch(() => {
-            rdsStore.set(model$, (prev) => ({ ...prev, sorts: g.state.sortModel.get() }));
-            resetRequest();
-        }));
-        // Filter model monitoring
-        cleanup.push(g.state.filterModel.watch(() => {
-            rdsStore.set(model$, (prev) => ({ ...prev, filters: g.state.filterModel.get() }));
-            resetRequest();
-        }));
-        cleanup.push(g.state.quickSearch.watch(() => {
-            rdsStore.set(model$, (prev) => ({ ...prev, quickSearch: g.state.quickSearch.get() }));
-            resetRequest();
-        }));
-        cleanup.push(g.state.filterInModel.watch(() => {
-            rdsStore.set(model$, (prev) => ({ ...prev, filtersIn: g.state.filterInModel.get() }));
-            resetRequest();
-        }));
-        // Row group model monitoring
-        cleanup.push(g.state.rowGroupModel.watch(() => {
-            rdsStore.set(model$, (prev) => ({ ...prev, group: g.state.rowGroupModel.get() }));
-            resetRequest();
-        }));
-        // Row group expansions monitoring
-        cleanup.push(g.state.rowGroupExpansions.watch(() => {
-            rdsStore.set(model$, (prev) => ({
-                ...prev,
-                groupExpansions: g.state.rowGroupExpansions.get(),
-            }));
-            grid?.state.rowDataStore.rowClearCache();
-        }));
-        // Agg model monitoring
-        cleanup.push(g.state.aggModel.watch(() => {
-            rdsStore.set(model$, (prev) => ({ ...prev, agg: g.state.aggModel.get() }));
+                sorts: sortModel,
+            };
+            if (equal(newModel, prevModel))
+                return;
+            prevModel = newModel;
+            model$.set(newModel);
             resetRequest();
-        }));
+        });
     };
     const rowById = (id) => {
         const f = flat.get();
         const node = f.rowIdToRow.get(id);
         if (!node) {
             {
-                const top = rdsStore.get(topData);
+                const top = peek(topData);
                 const node = top.find((c) => c.id === id);
                 if (node)
                     return { kind: "leaf", data: node.data, id: node.id };
             }
             {
-                const bot = rdsStore.get(topData);
+                const bot = peek(topData);
                 const node = bot.find((c) => c.id === id);
                 if (node)
                     return { kind: "leaf", data: node.data, id: node.id };
@@ -428,9 +410,9 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
     };
     const rowByIndex = (ri) => {
         const f = flat.get();
-        const top = rdsStore.get(topData);
-        const bot = rdsStore.get(botData);
-        const errors = rdsStore.get(nodesWithError);
+        const top = peek(topData);
+        const bot = peek(botData);
+        const errors = peek(nodesWithError);
         const error = errors.get(ri);
         if (ri == null || ri < 0 || ri >= f.size + top.length + bot.length)
             return null;
@@ -453,7 +435,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             return { kind: "leaf", data: null, id: `error-${ri}`, loading: false, error };
         if (!node)
             return { kind: "leaf", data: null, id: `loading-${ri}`, loading: true, error: null };
-        const isLoading = rdsStore.get(loadingGroups$);
+        const isLoading = peek(loadingGroups$);
         if (node.kind === "parent") {
             return {
                 kind: "branch",
@@ -472,10 +454,10 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             error,
         };
     };
-    const loadingGroups$ = atom(new Set());
+    const loadingGroups$ = signal(new Set());
     const rowExpand = (p) => {
         const f = flat.get();
-        const loadingRows = new Set(rdsStore.get(loadingGroups$));
+        const loadingRows = new Set(peek(loadingGroups$));
         const rowsForThis = new Set();
         const rowIndices = [];
         const requests = Object.entries(p)
@@ -503,39 +485,39 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             };
         })
             .filter((c) => !!c);
-        const mode = rdsStore.get(pivotMode);
+        const mode = peek(pivotMode);
         // Remove the errors before requesting.
-        const errorRows = rdsStore.get(nodesWithError);
+        const errorRows = peek(nodesWithError);
         if (rowIndices.some((c) => errorRows.has(c))) {
-            rdsStore.set(nodesWithError, (prev) => {
+            nodesWithError.set((prev) => {
                 const n = new Map(prev);
                 rowIndices.forEach((c) => n.delete(c));
                 return prev;
             });
         }
         // Mark these groups as loading
-        rdsStore.set(loadingGroups$, loadingRows);
+        loadingGroups$.set(loadingRows);
         grid?.state.rowDataStore.rowClearCache();
         dataRequestHandler(requests, false, () => {
             if (mode)
                 grid?.state.columnPivotColumnGroupExpansions.set((prev) => ({ ...prev, ...p }));
             else
                 grid?.state.rowGroupExpansions.set((prev) => ({ ...prev, ...p }));
-            const next = new Set(rdsStore.get(loadingGroups$));
+            const next = new Set(peek(loadingGroups$));
             rowsForThis.forEach((c) => next.delete(c));
-            rdsStore.set(loadingGroups$, next);
+            loadingGroups$.set(next);
             setTimeout(() => {
                 grid?.state.rowDataStore.rowClearCache();
             });
         }, (error) => {
-            rdsStore.set(nodesWithError, (prev) => {
+            nodesWithError.set((prev) => {
                 const n = new Map(prev);
                 rowIndices.forEach((c) => n.set(c, error));
                 return prev;
             });
-            const next = new Set(rdsStore.get(loadingGroups$));
+            const next = new Set(peek(loadingGroups$));
             rowsForThis.forEach((c) => next.delete(c));
-            rdsStore.set(loadingGroups$, next);
+            loadingGroups$.set(next);
             setTimeout(() => {
                 grid?.state.rowDataStore.rowClearCache();
             });
@@ -618,8 +600,8 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
     };
     const rowUpdate = (updates) => {
         const f = flat.get();
-        const top = rdsStore.get(topData);
-        const bot = rdsStore.get(botData);
+        const top = peek(topData);
+        const bot = peek(botData);
         const firstBot = f.size + top.length;
         const idMap = new Map([...updates.entries()]
             .map(([key, data]) => {

package/dist/rows/row/row.d.ts

@@ -4,4 +4,4 @@ export interface RowProps extends Omit<DropWrapProps, "accepted"> {
     readonly row: RowNormalRowLayout<any>;
     readonly accepted?: string[];
 }
-export declare const Row: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Row: import("react").NamedExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rows/row/row.js

@@ -1,16 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef, memo } from "react";
 import { useGridRoot } from "../../context";
 import { RowDetailRow } from "../row-detail-row";
 import { RowReact } from "@1771technologies/lytenyte-shared";
 import { useRowContextValue } from "./use-row-context-value";
 import { RowContext } from "./context";
+import { equal } from "@1771technologies/lytenyte-js-utils";
+import { CellSpacerNoPin } from "../../cells/cell-spacer";
 const empty = [];
 const RowImpl = forwardRef(function Rows({ row, ...props }, forwarded) {
     const ctx = useGridRoot().grid;
     const rowMeta = useRowContextValue(ctx, row.row);
     const accepted = props.accepted ?? empty;
-    return (_jsx(RowContext.Provider, { value: rowMeta, children: _jsxs(RowReact, { ...props, ref: forwarded, accepted: accepted, gridId: ctx.state.gridId.useValue(), rowIndex: row.rowIndex, rowFirstPinBottom: row.rowFirstPinBottom, rowLastPinTop: row.rowLastPinTop, rowIsFocusRow: row.rowIsFocusRow ?? false, yPositions: ctx.state.yPositions.useValue(), "data-ln-row-selected": rowMeta.selected, children: [props.children, _jsx(RowDetailRow, { layout: row })] }) }));
+    return (_jsx(RowContext.Provider, { value: rowMeta, children: _jsxs(RowReact, { ...props, ref: forwarded, accepted: accepted, gridId: ctx.state.gridId.useValue(), rowIndex: row.rowIndex, rowFirstPinBottom: row.rowFirstPinBottom, rowLastPinTop: row.rowLastPinTop, rowIsFocusRow: row.rowIsFocusRow ?? false, yPositions: ctx.state.yPositions.useValue(), "data-ln-row-selected": rowMeta.selected, children: [_jsx(CellSpacerNoPin, {}), props.children, _jsx(RowDetailRow, { layout: row })] }) }));
+});
+export const Row = memo(RowImpl, (prev, next) => {
+    const { row: rowP, ...propsP } = prev;
+    const { row: rowN, ...propsN } = next;
+    const { cells: _, ...rowPropsP } = rowP;
+    const { cells: __, ...rowPropsN } = rowN;
+    return equal(rowPropsN, rowPropsP) && equal(propsP, propsN);
 });
-export const Row = fastDeepMemo(RowImpl);

package/dist/rows/rows-sections.js

@@ -15,7 +15,7 @@ export const RowsCenter = fastDeepMemo(forwardRef(function RowsCenter({ children
     const cx = useGridRoot().grid;
     const view = cx.view.useValue().rows;
     const rowCenterCount = cx.state.rowDataStore.rowCenterCount.useValue();
-    return (_jsx(RowsCenterReact, { ...props, ref: forwarded, rowFirst: cx.state.rowDataStore.rowTopCount.useValue(), rowLast: rowCenterCount + cx.state.rowDataStore.rowTopCount.useValue(), height: view.rowCenterTotalHeight, children: _jsxs(NativeScroller, { children: [_jsx(CellSelectionCenter, {}), children] }) }));
+    return (_jsx(RowsCenterReact, { ...props, ref: forwarded, rowFirst: cx.state.rowDataStore.rowTopCount.useValue(), rowLast: rowCenterCount + cx.state.rowDataStore.rowTopCount.useValue(), height: view.rowCenterTotalHeight, pinSectionHeights: view.rowBottomTotalHeight + view.rowTopTotalHeight, children: _jsxs(NativeScroller, { children: [_jsx(CellSelectionCenter, {}), children] }) }));
 }));
 export const RowsBottom = fastDeepMemo(forwardRef(function RowsBottom(props, forwarded) {
     const cx = useGridRoot().grid;

package/dist/sort-manager/+types.d.ts

@@ -1,9 +1,11 @@
+import type { SortModelItem } from "../+types";
 export interface SortItem {
     readonly isCustom: boolean;
     readonly columnId?: string;
     readonly label?: string;
     readonly sortOn?: "values" | "values_absolute" | "values_accented" | "values_nulls_first" | "values_absolute_nulls_first" | "values_accented_nulls_first" | "values_absolute_accented_nulls_first";
     readonly sortDirection: "ascending" | "descending";
+    readonly originalSort?: SortModelItem<any>;
 }
 export interface Option {
     readonly label: string;

package/dist/sort-manager/hooks/use-sort-row-item.js

@@ -118,11 +118,11 @@ const sortValuesForDateAndDateTime = [
 const sortValuesString = [
     { label: "Values", value: "values" },
     { label: "Insensitive", value: "values_insensitive" },
-    { label: "Insensitive, Ignore Punctuation", value: "value_insensitive_ignore" },
-    { label: "Insensitive, Trim", value: "value_insensitive_trim" },
-    { label: "Insensitive, Ignore Punctuation, Trim", value: "value_insensitive_ignore_trim" },
-    { label: "Ignore Punctuation", value: "values_ignore_punctuation" },
-    { label: "Ignore Punctuation, Trim", value: "values_ignore_punctuation_trim" },
+    { label: "Insensitive, Ignore Punctuation", value: "values_insensitive_ignore" },
+    { label: "Insensitive, Trim", value: "values_insensitive_trim" },
+    { label: "Insensitive, Ignore Punctuation, Trim", value: "values_insensitive_ignore_trim" },
+    { label: "Ignore Punctuation", value: "values_ignore" },
+    { label: "Ignore Punctuation, Trim", value: "values_ignore_trim" },
     { label: "Trim Whitespace", value: "values_trim" },
     { label: "Nulls First", value: "values_nulls_first" },
     { label: "Nulls First, Insensitive", value: "values_nulls_first_insensitive" },
@@ -131,7 +131,7 @@ const sortValuesString = [
     { label: "Nulls First, Insensitive, Trim", value: "values_nulls_first_insensitive_trim" },
     {
         label: "Nulls First, Insensitive, Ignore Punctuation",
-        value: "values_nulls_insensitive_first_ignore",
+        value: "values_nulls_first_insensitive_ignore",
     },
     {
         label: "Nulls First, Insensitive, Ignore Punctuation, Trim",

package/dist/sort-manager/utils/sort-item-to-sort-model.js

@@ -1,6 +1,8 @@
 export function sortItemsToSortModel(sortItems, lookup) {
     return sortItems
         .filter((c) => {
+        if (c.isCustom)
+            return true;
         if (!c.columnId)
             return false;
         if (!c.sortOn)
@@ -11,6 +13,9 @@ export function sortItemsToSortModel(sortItems, lookup) {
     })
         .map((c) => {
         const col = lookup.get(c.columnId);
+        if (c.isCustom) {
+            return c.originalSort;
+        }
         if (col.type === "number") {
             return {
                 columnId: col.id,

package/dist/sort-manager/utils/sort-model-to-sort-items.js

@@ -8,6 +8,7 @@ export function sortModelToSortItems(items, lookup) {
                 isCustom: true,
                 sortDirection,
                 columnId: c.columnId ?? undefined,
+                originalSort: c,
             };
         }
         const column = lookup.get(columnId);
@@ -23,7 +24,7 @@ export function sortModelToSortItems(items, lookup) {
             if (opts?.ignorePunctuation)
                 value += "_ignore";
             if (opts?.trimWhitespace)
-                value += "trim";
+                value += "_trim";
         }
         if (c.sort.kind === "number") {
             const opts = c.sort.options;

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

@@ -1,14 +1,13 @@
-import type { LayoutMap } from "@1771technologies/lytenyte-shared";
-import type { Column, DataRect, EditActivePosition, GridAtom, GridAtomReadonly, HeaderGroupCellLayout, PositionUnion, VirtualTarget } from "../+types";
-import type { Atom, createStore } from "@1771technologies/atom";
+import type { LayoutState, WriteSignal } from "@1771technologies/lytenyte-shared";
+import type { Column, EditActivePosition, GridAtom, GridAtomReadonly, HeaderGroupCellLayout, PositionUnion, VirtualTarget } from "../+types";
+import type { DataRectSplit } from "../cell-selection/split-cell-selection-rect";
 export interface InternalAtoms {
     readonly headerRows: GridAtomReadonly<number>;
     readonly headerCols: GridAtomReadonly<number>;
     readonly headerHeightTotal: GridAtomReadonly<number>;
     readonly xScroll: GridAtom<number>;
     readonly yScroll: GridAtom<number>;
-    readonly refreshKey: GridAtom<number>;
-    readonly layout: GridAtomReadonly<LayoutMap>;
+    readonly layout: LayoutState;
     readonly focusActive: GridAtom<PositionUnion | null>;
     readonly focusPrevColIndex: GridAtom<number | null>;
     readonly focusPrevRowIndex: GridAtom<number | null>;
@@ -17,7 +16,7 @@ export interface InternalAtoms {
     readonly editValidation: GridAtom<Record<string, any> | boolean>;
     readonly rowAutoHeightCache: GridAtom<Record<number, number>>;
     readonly rowDetailAutoHeightCache: GridAtom<Record<number, number>>;
-    readonly rowSelectedIds: Atom<Set<string>>;
+    readonly rowSelectedIds: WriteSignal<Set<string>>;
     readonly rowSelectionPivot: GridAtom<string | null>;
     readonly rowSelectionLastWasDeselect: GridAtom<boolean>;
     readonly rowGroupColumnState: GridAtom<Record<string, Partial<Column<any>>>>;
@@ -27,9 +26,8 @@ export interface InternalAtoms {
         target: HTMLElement | VirtualTarget;
         context: any;
     }>>;
-    readonly cellSelectionPivot: GridAtom<DataRect | null>;
-    readonly cellSelectionAdditiveRects: GridAtom<DataRect[] | null>;
+    readonly cellSelectionPivot: GridAtom<DataRectSplit | null>;
+    readonly cellSelectionAdditiveRects: GridAtom<DataRectSplit[] | null>;
     readonly cellSelectionIsDeselect: GridAtom<boolean>;
-    readonly cellSelectionSplits: GridAtomReadonly<DataRect[]>;
-    readonly store: ReturnType<typeof createStore>;
+    readonly cellSelectionSplits: GridAtomReadonly<DataRectSplit[]>;
 }

package/dist/state/api/cell-root.d.ts

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

package/dist/state/api/cell-root.js

@@ -0,0 +1,64 @@
+import { CONTAINS_DEAD_CELLS, FULL_WIDTH, updateLayout } from "@1771technologies/lytenyte-shared";
+import { getSpanFn } from "../helpers/get-span-callback";
+import { getFullWidthCallback } from "../helpers/get-full-width-callback";
+export const makeCellRoot = (grid) => {
+    return (row, column) => {
+        const l = grid.internal.layout;
+        const meta = grid.state.columnMeta.get();
+        const ds = grid.state.rowDataStore;
+        // Is this a valid position.
+        if (row < 0 || row >= ds.rowCount.get())
+            return null;
+        if (column < 0 || column >= meta.columnsVisible.length)
+            return null;
+        const rds = grid.state.rowDataSource.get();
+        const columns = meta.columnsVisible;
+        const rowFullWidthPredicate = grid.state.rowFullWidthPredicate.get();
+        if (!l.computed[row]) {
+            updateLayout({
+                base: l.base,
+                computed: l.computed,
+                lookup: l.lookup,
+                special: l.special,
+                botCount: ds.rowBottomCount.get(),
+                topCount: ds.rowTopCount.get(),
+                startCount: meta.columnVisibleStartCount,
+                centerCount: meta.columnVisibleCenterCount,
+                endCount: meta.columnVisibleEndCount,
+                computeColSpan: getSpanFn(rds, grid, columns, "col"),
+                computeRowSpan: getSpanFn(rds, grid, columns, "row"),
+                isFullWidth: getFullWidthCallback(rds, rowFullWidthPredicate.fn, grid),
+                isRowCutoff: (r) => {
+                    const row = rds.rowByIndex(r);
+                    return !row || row.kind === "branch";
+                },
+                rowStart: row,
+                rowEnd: row + 1,
+                rowMax: ds.rowCenterCount.get() + ds.rowTopCount.get(),
+                rowScanDistance: grid.state.rowScanDistance.get(),
+            });
+        }
+        const status = l.special[row];
+        if (status === FULL_WIDTH) {
+            return { kind: "full-width", rowIndex: row, colIndex: 0 };
+        }
+        if (status === CONTAINS_DEAD_CELLS) {
+            const spec = l.lookup.get(row);
+            // This cell is not covered
+            if (!spec || spec[column * 4] !== 0) {
+                return { kind: "cell", rowIndex: row, colIndex: column, root: null };
+            }
+            const rowSpan = spec[column * 4];
+            const colSpan = spec[column * 4 + 1];
+            const rowIndex = spec[column * 4 + 2];
+            const colIndex = spec[column * 4 + 3];
+            return {
+                kind: "cell",
+                rowIndex: row,
+                colIndex: column,
+                root: { colIndex, colSpan, rowIndex, rowSpan },
+            };
+        }
+        return { kind: "cell", rowIndex: row, colIndex: column, root: null };
+    };
+};