@1771technologies/lytenyte-pro 1.0.20 → 2.0.0-dev.1

package/dist/__play__/basic-server-data/server.d.ts

@@ -0,0 +1,36 @@
+import type { DataRequest } from "../../data-source-server/types";
+export declare function Server(reqs: DataRequest[], groupModel: string[]): Promise<({
+    asOfTime: number;
+    data: {
+        kind: "leaf";
+        id: string;
+        data: {
+            id: string;
+            Age: number;
+            Gender: string;
+            "Education Level": string;
+            "Job Title": string;
+            "Years of Experience": number;
+            Salary: number;
+        };
+    }[];
+    start: number;
+    end: number;
+    kind: "center";
+    path: (string | null)[];
+    size: number;
+} | {
+    kind: "center";
+    asOfTime: number;
+    data: {
+        kind: "branch";
+        childCount: number;
+        data: {};
+        id: string;
+        key: string;
+    }[];
+    path: (string | null)[];
+    start: number;
+    end: number;
+    size: number;
+})[]>;

package/dist/__play__/basic-server-data/server.js

@@ -0,0 +1,105 @@
+import { data } from "./data.js";
+const sleep = () => new Promise((res) => setTimeout(res, 0));
+export async function Server(reqs, groupModel) {
+    // Simulate latency and server work.
+    await sleep();
+    return reqs.map((c) => {
+        // Return flat items if there are no row groups
+        if (!groupModel.length) {
+            return {
+                asOfTime: Date.now(),
+                data: data.slice(c.start, c.end).map((x) => {
+                    return {
+                        kind: "leaf",
+                        id: x.id,
+                        data: x,
+                    };
+                }),
+                start: c.start,
+                end: c.end,
+                kind: "center",
+                path: c.path,
+                size: data.length,
+            };
+        }
+        const groupLevel = c.path.length;
+        const groupKeys = groupModel.slice(0, groupLevel + 1);
+        const filteredForGrouping = data.filter((row) => {
+            return c.path.every((v, i) => {
+                const groupKey = groupModel[i];
+                return `${row[groupKey]}` === v;
+            });
+        });
+        // This is the leaf level of the grouping
+        if (groupLevel === groupModel.length) {
+            return {
+                kind: "center",
+                asOfTime: Date.now(),
+                start: c.start,
+                end: c.end,
+                path: c.path,
+                data: filteredForGrouping.slice(c.start, c.end).map((x) => {
+                    return {
+                        kind: "leaf",
+                        id: x.id,
+                        data: x,
+                    };
+                }),
+                size: filteredForGrouping.length,
+            };
+        }
+        const groupedData = Object.groupBy(filteredForGrouping, (r) => {
+            const groupPath = groupKeys.map((g) => {
+                if (typeof g !== "string")
+                    throw new Error("Non-string groups are not supported by this dummy implementation");
+                return r[g];
+            });
+            return groupPath.join(" / ");
+        });
+        // Sort the groups to make them nicer
+        const rows = Object.entries(groupedData).sort((x, y) => {
+            const left = x[0];
+            const right = y[0];
+            const asNumberLeft = Number.parseFloat(left.split("/").at(-1).trim());
+            const asNumberRight = Number.parseFloat(right.split("/").at(-1).trim());
+            if (Number.isNaN(asNumberLeft) || Number.isNaN(asNumberRight)) {
+                if (!left && !right)
+                    return 0;
+                if (!left)
+                    return 1;
+                if (!right)
+                    return -1;
+                return left.localeCompare(right);
+            }
+            return asNumberLeft - asNumberRight;
+        });
+        return {
+            kind: "center",
+            asOfTime: Date.now(),
+            data: rows.slice(c.start, c.end).map((x) => {
+                const childRows = x[1];
+                const nextGroup = groupLevel + 1;
+                let childCnt;
+                if (nextGroup === groupModel.length)
+                    childCnt = childRows.length;
+                else {
+                    childCnt = Object.keys(Object.groupBy(childRows, (x) => {
+                        const groupKey = groupModel[nextGroup];
+                        return x[groupKey];
+                    })).length;
+                }
+                return {
+                    kind: "branch",
+                    childCount: childCnt,
+                    data: {}, // See aggregations
+                    id: x[0],
+                    key: x[0].split(" / ").at(-1),
+                };
+            }),
+            path: c.path,
+            start: c.start,
+            end: c.end,
+            size: rows.length,
+        };
+    });
+}

package/dist/__play__/buttons.play.d.ts

@@ -0,0 +1,4 @@
+import "../../css/light-dark.css";
+import "@1771technologies/lytenyte-design/shadcn-vars.css";
+import "../../css/components.css";
+export default function Buttons(): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/buttons.play.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../css/light-dark.css";
+import "@1771technologies/lytenyte-design/shadcn-vars.css";
+import "../../css/components.css";
+export default function Buttons() {
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, className: "ln-light", children: [_jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [_jsx("button", { "data-ln-size": "sm", "data-ln-button": "primary", children: "Button" }), _jsx("button", { "data-ln-size": "md", "data-ln-button": "primary", children: "Button" }), _jsx("button", { "data-ln-size": "lg", "data-ln-button": "primary", children: "Button" }), _jsx("button", { "data-ln-size": "mx", "data-ln-button": "primary", children: "Button" })] }), _jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [_jsx("button", { "data-ln-size": "sm", "data-ln-button": "primary", disabled: true, children: "Button" }), _jsx("button", { "data-ln-size": "md", "data-ln-button": "primary", disabled: true, children: "Button" }), _jsx("button", { "data-ln-size": "lg", "data-ln-button": "primary", disabled: true, children: "Button" }), _jsx("button", { "data-ln-size": "mx", "data-ln-button": "primary", disabled: true, children: "Button" })] }), _jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [_jsx("button", { "data-ln-size": "sm", "data-ln-button": "secondary", children: "Button" }), _jsx("button", { "data-ln-size": "md", "data-ln-button": "secondary", children: "Button" }), _jsx("button", { "data-ln-size": "lg", "data-ln-button": "secondary", children: "Button" }), _jsx("button", { "data-ln-size": "mx", "data-ln-button": "secondary", children: "Button" })] }), _jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [_jsx("button", { "data-ln-size": "sm", "data-ln-button": "tertiary", children: "Button" }), _jsx("button", { "data-ln-size": "md", "data-ln-button": "tertiary", children: "Button" }), _jsx("button", { "data-ln-size": "lg", "data-ln-button": "tertiary", children: "Button" }), _jsx("button", { "data-ln-size": "mx", "data-ln-button": "tertiary", children: "Button" })] })] }));
+}

package/dist/__play__/inputs.play.d.ts

@@ -0,0 +1,3 @@
+import "../../css/light-dark.css";
+import "../../css/components/input.css";
+export default function Inputs(): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/inputs.play.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../css/light-dark.css";
+import "../../css/components/input.css";
+export default function Inputs() {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 20,
+            padding: 20,
+        }, children: [_jsx("input", { "data-ln-input": true }), _jsx("button", { "data-ln-input": true, style: { width: 152 }, children: "Greater Than" })] }));
+}

package/dist/__play__/server.play.d.ts

@@ -0,0 +1,3 @@
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+export default function Experimental(): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/server.play.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "@1771technologies/play-frame";
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+import { useRef, useState } from "react";
+import { RowGroupCell } from "../components/row-group-cell.js";
+import { useServerDataSource } from "../data-source-server/use-server-data-source.js";
+import { Server } from "./basic-server-data/server.js";
+import { Grid } from "../index.js";
+const columns = [
+    {
+        id: "Gender",
+        width: 120,
+        widthFlex: 1,
+    },
+    {
+        id: "Education Level",
+        name: "Education",
+        width: 160,
+        hide: true,
+        widthFlex: 1,
+    },
+    {
+        id: "Age",
+        type: "number",
+        width: 100,
+        widthFlex: 1,
+    },
+    {
+        id: "Years of Experience",
+        name: "YoE",
+        type: "number",
+        width: 100,
+        widthFlex: 1,
+    },
+    { id: "Salary", type: "number", width: 160, widthFlex: 1 },
+];
+export default function Experimental() {
+    const ds = useServerDataSource({
+        rowGroupDefaultExpansion: true,
+        queryFn: async ({ requests }) => {
+            return Server(requests, []);
+        },
+        queryKey: [],
+        rowUpdateOptimistically: true,
+        onRowsAdded: async () => {
+            //
+        },
+        onRowsDeleted: async () => { },
+    });
+    const [rowGroupColumn, setRowGroupColumn] = useState({
+        cellRenderer: RowGroupCell,
+    });
+    const isLoading = ds.isLoading.useValue();
+    const error = ds.loadingError.useValue();
+    const { resolvedTheme } = useTheme();
+    const ref = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { height: 40 }, children: [_jsxs(_Fragment, { children: [isLoading && _jsx("div", { children: "Loading..." }), error && _jsx("div", { children: `${error}` })] }), _jsx("button", { onClick: () => {
+                            ref.current?.rowSelect({ selected: "all" });
+                        }, children: "Select All" }), _jsx("button", { onClick: () => ref.current?.rowAdd([{ id: crypto.randomUUID(), data: {}, kind: "leaf", depth: 0 }]), children: "Add Row" })] }), _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx("div", { className: "ln-grid " + (resolvedTheme === "light" ? "ln-light" : "ln-dark"), style: { height: "90vh", width: "90vw" }, children: _jsx(Grid, { columns: columns, rowSource: ds, rowGroupColumn: rowGroupColumn, onRowGroupColumnChange: setRowGroupColumn, columnMarker: {
+                            on: true,
+                            cellRenderer: ({ api, row }) => {
+                                return _jsx("button", { onClick: () => api.rowDelete([row]), children: "X" });
+                            },
+                        }, ref: ref }) }) })] }));
+}

package/dist/__play__/tree.play.d.ts

@@ -0,0 +1,3 @@
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+export default function Experimental(): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/tree.play.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTheme } from "@1771technologies/play-frame";
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+import { useMemo, useRef } from "react";
+import { Grid } from "../index.js";
+import { useTreeDataSource } from "../data-source-tree/use-tree-data-source.js";
+import { RowGroupCell } from "../components/row-group-cell.js";
+const columns = [
+    {
+        id: "x",
+    },
+];
+export default function Experimental() {
+    const ds = useTreeDataSource({
+        filter: (v) => v.x > 1,
+        data: {
+            one: { x: 12 },
+            two: {
+                x: 11,
+                fire: {
+                    x: 11,
+                },
+                axel: {
+                    x: 12,
+                    cooked: {
+                        x: 12,
+                    },
+                    timer: {
+                        x: 1,
+                        fly: {
+                            y: 1,
+                            x: 0.5,
+                        },
+                    },
+                },
+            },
+        },
+    });
+    const { resolvedTheme } = useTheme();
+    const ref = useRef(null);
+    return (_jsx(_Fragment, { children: _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx("div", { className: "ln-grid " + (resolvedTheme === "light" ? "ln-light" : "ln-dark"), style: { height: "90vh", width: "90vw" }, children: _jsx(Grid, { columns: columns, rowSource: ds, ref: ref, rowGroupColumn: useMemo(() => {
+                        return {
+                            cellRenderer: RowGroupCell,
+                        };
+                    }, []) }) }) }) }));
+}

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

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

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

@@ -1,16 +1,16 @@
 import { getRootCell } from "./get-root-cell.js";
-export function adjustRectForRowAndCellSpan(grid, rect) {
+export function adjustRectForRowAndCellSpan(cellRoot, rect) {
     let { rowStart, rowEnd, columnStart, columnEnd } = rect;
     // Check the top row of the rect.
     for (let i = columnStart; i < columnEnd; i++) {
-        let cell = getRootCell(grid, rowStart, i);
+        let cell = getRootCell(cellRoot, rowStart, i);
         if (cell) {
             columnStart = Math.min(columnStart, cell.colIndex);
             columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);
             rowStart = Math.min(rowStart, cell.rowIndex);
             rowEnd = Math.max(rowEnd, cell.rowIndex + cell.rowSpan);
         }
-        cell = getRootCell(grid, rowEnd - 1, i);
+        cell = getRootCell(cellRoot, rowEnd - 1, i);
         if (cell) {
             columnStart = Math.min(columnStart, cell.colIndex);
             columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);
@@ -19,14 +19,14 @@ export function adjustRectForRowAndCellSpan(grid, rect) {
         }
     }
     for (let i = rowStart; i < rowEnd; i++) {
-        let cell = getRootCell(grid, i, columnStart);
+        let cell = getRootCell(cellRoot, i, columnStart);
         if (cell) {
             columnStart = Math.min(columnStart, cell.colIndex);
             columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);
             rowStart = Math.min(rowStart, cell.rowIndex);
             rowEnd = Math.max(rowEnd, cell.rowIndex + cell.rowSpan);
         }
-        cell = getRootCell(grid, i, columnEnd - 1);
+        cell = getRootCell(cellRoot, i, columnEnd - 1);
         if (cell) {
             columnStart = Math.min(columnStart, cell.colIndex);
             columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);

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

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

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

@@ -1,2 +1,3 @@
-import type { DataRect, Grid } from "../+types.js";
-export declare function boundSelectionRect(grid: Grid<any>, rect: DataRect): DataRect;
+import { type ColumnView } from "@1771technologies/lytenyte-shared";
+import type { DataRect } from "../types";
+export declare function boundSelectionRect(view: ColumnView, rowCount: number, rect: DataRect): DataRect;

package/dist/cell-selection/bound-selection-rect.js

@@ -1,9 +1,8 @@
 import { clamp } from "@1771technologies/lytenyte-shared";
-export function boundSelectionRect(grid, rect) {
-    const rowCount = grid.state.rowDataStore.rowCount.get();
+export function boundSelectionRect(view, rowCount, rect) {
     const maxRow = rowCount;
     const minRow = 0;
-    const maxColumn = grid.state.columnMeta.get().columnsVisible.length;
+    const maxColumn = view.visibleColumns.length;
     const minColumn = 0;
     const rowStartMaybe = clamp(minRow, rect.rowStart, maxRow);
     const rowEndMaybe = clamp(minRow, rect.rowEnd, maxRow);

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

@@ -1,26 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { CellStyleRow } from "./cell-style-row.js";
-import { useGridRoot } from "../context.js";
 import { isTopRect } from "./is-top-rect.js";
 import { isCenterRect } from "./is-center-rect.js";
 import { isBottomRect } from "./is-bottom-rect.js";
+import { useRoot } from "@1771technologies/lytenyte-core/internal";
+import { useProRoot } from "../root/context.js";
 export const CellSelectionTop = memo(function CellSelectionTop() {
-    const cx = useGridRoot();
-    const allRects = cx.grid.internal.cellSelectionSplits.useValue();
+    const { source } = useRoot();
+    const { cellSelectionSplits: allRects, cellSelectionAdditiveRects: additive, cellSelectionIsDeselect, } = useProRoot();
+    const topCount = source.useTopCount();
     const topRects = useMemo(() => {
-        return allRects.filter((rect) => isTopRect(cx.grid, rect));
-    }, [allRects, cx.grid]);
-    const mode = cx.grid.state.cellSelectionMode.useValue();
-    const showPivot = mode === "multi-range" || mode === "range";
-    const additive = cx.grid.internal.cellSelectionAdditiveRects.useValue();
-    const isDeselect = cx.grid.internal.cellSelectionIsDeselect.useValue();
-    const pivot = cx.grid.internal.cellSelectionPivot.useValue();
+        return allRects.filter((rect) => isTopRect(topCount, rect));
+    }, [allRects, topCount]);
+    const isDeselect = cellSelectionIsDeselect.current;
     const additiveRects = useMemo(() => {
         if (!additive)
             return [];
-        return additive.filter((rect) => isTopRect(cx.grid, rect));
-    }, [additive, cx.grid]);
+        return additive.filter((rect) => isTopRect(topCount, rect));
+    }, [additive, topCount]);
     return (_jsxs("div", { role: "presentation", style: {
             width: "100%",
             height: 0,
@@ -31,24 +29,23 @@ export const CellSelectionTop = memo(function CellSelectionTop() {
                 return _jsx(CellStyleRow, { rect: rect, isRowPinnedTop: true }, i);
             }), additiveRects.map((rect) => {
                 return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
-            }), showPivot && pivot && isTopRect(cx.grid, pivot) && (_jsx(CellStyleRow, { rect: pivot, isPivot: true, isRowPinnedTop: true }))] }));
+            })] }));
 });
 export const CellSelectionCenter = memo(function CellSelectionCenter() {
-    const cx = useGridRoot();
-    const allRects = cx.grid.internal.cellSelectionSplits.useValue();
-    const pivot = cx.grid.internal.cellSelectionPivot.useValue();
+    const { source } = useRoot();
+    const { cellSelectionSplits: allRects, cellSelectionAdditiveRects: additive, cellSelectionIsDeselect, } = useProRoot();
+    const topCount = source.useTopCount();
+    const rowCount = source.useRowCount();
+    const botCount = source.useBottomCount();
     const centerRects = useMemo(() => {
-        return allRects.filter((rect) => isCenterRect(cx.grid, rect));
-    }, [allRects, cx.grid]);
-    const additive = cx.grid.internal.cellSelectionAdditiveRects.useValue();
-    const isDeselect = cx.grid.internal.cellSelectionIsDeselect.useValue();
+        return allRects.filter((rect) => isCenterRect(rowCount, botCount, topCount, rect));
+    }, [allRects, botCount, rowCount, topCount]);
+    const isDeselect = cellSelectionIsDeselect.current;
     const additiveRects = useMemo(() => {
         if (!additive)
             return [];
-        return additive.filter((rect) => isCenterRect(cx.grid, rect));
-    }, [additive, cx.grid]);
-    const mode = cx.grid.state.cellSelectionMode.useValue();
-    const showPivot = mode === "multi-range" || mode === "range";
+        return additive.filter((rect) => isCenterRect(rowCount, botCount, topCount, rect));
+    }, [additive, botCount, rowCount, topCount]);
     return (_jsxs("div", { role: "presentation", style: {
             width: "100%",
             height: 0,
@@ -59,24 +56,22 @@ export const CellSelectionCenter = memo(function CellSelectionCenter() {
                 return _jsx(CellStyleRow, { rect: rect }, i);
             }), additiveRects.map((rect) => {
                 return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
-            }), showPivot && pivot && isCenterRect(cx.grid, pivot) && _jsx(CellStyleRow, { rect: pivot, isPivot: true })] }));
+            })] }));
 });
 export const CellSelectionBottom = memo(function CellSelectionBottom() {
-    const cx = useGridRoot();
-    const allRects = cx.grid.internal.cellSelectionSplits.useValue();
-    const pivot = cx.grid.internal.cellSelectionPivot.useValue();
+    const { source } = useRoot();
+    const { cellSelectionSplits: allRects, cellSelectionAdditiveRects: additive, cellSelectionIsDeselect, } = useProRoot();
+    const rowCount = source.useRowCount();
+    const botCount = source.useBottomCount();
     const bottomRects = useMemo(() => {
-        return allRects.filter((rect) => isBottomRect(cx.grid, rect));
-    }, [allRects, cx.grid]);
-    const additive = cx.grid.internal.cellSelectionAdditiveRects.useValue();
-    const isDeselect = cx.grid.internal.cellSelectionIsDeselect.useValue();
+        return allRects.filter((rect) => isBottomRect(rowCount, botCount, rect));
+    }, [allRects, botCount, rowCount]);
+    const isDeselect = cellSelectionIsDeselect.current;
     const additiveRects = useMemo(() => {
         if (!additive)
             return [];
-        return additive.filter((rect) => isBottomRect(cx.grid, rect));
-    }, [additive, cx.grid]);
-    const mode = cx.grid.state.cellSelectionMode.useValue();
-    const showPivot = mode === "multi-range" || mode === "range";
+        return additive.filter((rect) => isBottomRect(rowCount, botCount, rect));
+    }, [additive, botCount, rowCount]);
     return (_jsxs("div", { role: "presentation", style: {
             width: "100%",
             height: 0,
@@ -87,5 +82,5 @@ export const CellSelectionBottom = memo(function CellSelectionBottom() {
                 return _jsx(CellStyleRow, { rect: rect, isRowPinnedBottom: true }, i);
             }), additiveRects.map((rect) => {
                 return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
-            }), showPivot && pivot && isBottomRect(cx.grid, pivot) && (_jsx(CellStyleRow, { rect: pivot, isPivot: true, isRowPinnedBottom: true }))] }));
+            })] }));
 });