@1771technologies/lytenyte-pro 1.0.0-beta.8 → 1.0.0

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

@@ -1,10 +1,10 @@
 import type { GridAtom, RowDataSourceClientPaginated } from "../+types.js";
-import { type ClientRowDataSourceParams } from "../+types.js";
+import { type ClientRowDataSourcePaginatedParams } from "../+types.js";
 interface DataAtoms<T> {
     readonly top: GridAtom<T[]>;
     readonly center: GridAtom<T[]>;
     readonly bottom: GridAtom<T[]>;
 }
-export declare function makeClientDataSourcePaginated<T>(p: ClientRowDataSourceParams<T>): [RowDataSourceClientPaginated<T>, DataAtoms<T>];
-export declare function useClientRowDataSourcePaginated<T>(p: ClientRowDataSourceParams<T>): RowDataSourceClientPaginated<T>;
+export declare function makeClientDataSourcePaginated<T>(p: ClientRowDataSourcePaginatedParams<T>): [RowDataSourceClientPaginated<T>, DataAtoms<T>];
+export declare function useClientRowDataSourcePaginated<T>(p: ClientRowDataSourcePaginatedParams<T>): RowDataSourceClientPaginated<T>;
 export {};

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

@@ -10,7 +10,7 @@ import { builtIns } from "./built-ins/built-ins.js";
 export function makeClientDataSourcePaginated(p) {
     const rdsStore = createStore();
     const pageInternal = atom(0);
-    const rowsPerPage = atom(50);
+    const rowsPerPage = atom(p.rowsPerPage ?? 50);
     const pageCount = atom((g) => Math.max(Math.ceil(g(flatLength) / g(rowsPerPage)), 1));
     const page = atom((g) => clamp(0, g(pageInternal), g(pageCount) - 1), (g, s, n) => {
         const res = typeof n === "function" ? n(g(pageInternal)) : n;
@@ -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))
@@ -200,14 +210,27 @@ export function makeClientDataSourcePaginated(p) {
         const currentPage = rdsStore.get(pageInternal);
         const center = clamp(0, rowCount - currentPage * perPage, perPage);
         store.rowCenterCount.set(center);
-        cleanup.push(rdsStore.sub(flatLength, () => {
-            grid.state.rowDataStore.rowClearCache();
+        const updateCounts = () => {
             const rowCount = rdsStore.get(flatLength);
             const perPage = rdsStore.get(rowsPerPage);
             const currentPage = rdsStore.get(pageInternal);
             const center = clamp(0, rowCount - currentPage * perPage, perPage);
+            // Move to the last page if we are past the boundary
+            if (center === 0 && currentPage !== 0) {
+                const currentPage = rdsStore.get(pageCount) - 1;
+                rdsStore.set(page, currentPage);
+                rdsStore.set(snapshot, (prev) => prev + 1);
+                const center = clamp(0, rowCount - currentPage * perPage, perPage);
+                store.rowCenterCount.set(center);
+                grid.state.rowDataStore.rowClearCache();
+                return;
+            }
             store.rowCenterCount.set(center);
-        }));
+            grid.state.rowDataStore.rowClearCache();
+        };
+        cleanup.push(rdsStore.sub(flatLength, updateCounts));
+        cleanup.push(rdsStore.sub(page, updateCounts));
+        cleanup.push(rdsStore.sub(rowsPerPage, updateCounts));
         cleanup.push(rdsStore.sub(pageInternal, () => {
             grid.state.rowDataStore.rowClearCache();
         }));
@@ -299,30 +322,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 +400,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 +460,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 +569,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.js

@@ -14,6 +14,9 @@ export function makeClientDataSource(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 = [];
@@ -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) => {
@@ -318,6 +328,7 @@ export function makeClientDataSource(p) {
         let prevPivotColumnValues = pivotModel.values;
         const updatePivotColumns = (model, ignoreEqualCheck = false) => {
             if (!ignoreEqualCheck &&
+                rdsStore.get(initialized) &&
                 equal(prevPivotColumnModel, model.columns) &&
                 equal(prevPivotColumnValues, model.values))
                 return;
@@ -429,30 +440,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 +513,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 +558,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 +686,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.js

@@ -12,6 +12,9 @@ export function makeClientTreeDataSource(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 = [];
@@ -130,6 +133,13 @@ export function makeClientTreeDataSource(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))
@@ -275,30 +285,32 @@ export function makeClientTreeDataSource(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);
@@ -346,11 +358,10 @@ export function makeClientTreeDataSource(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) => {
@@ -392,6 +403,11 @@ export function makeClientTreeDataSource(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$);
@@ -470,6 +486,19 @@ export function makeClientTreeDataSource(p) {
                 const t = rdsStore.get(tree);
                 grid.state.rowSelectedIds.set(new Set(t.idsAll));
             },
+            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;
+            },
             rowAreAllSelected: (rowId) => {
                 const g = rdsStore.get(grid$);
                 if (!g)
@@ -502,12 +531,12 @@ export function useClientTreeDataSource(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-server/use-server-data-source.js

@@ -453,6 +453,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$);
         if (node.kind === "parent") {
             return {
                 kind: "branch",
@@ -461,6 +462,7 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
                 key: node.path,
                 depth: getNodeDepth(node),
                 error,
+                loading: isLoading.has(node.data.id),
             };
         }
         return {
@@ -470,13 +472,19 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
             error,
         };
     };
+    const loadingGroups$ = atom(new Set());
     const rowExpand = (p) => {
         const f = flat.get();
+        const loadingRows = new Set(rdsStore.get(loadingGroups$));
+        const rowsForThis = new Set();
         const rowIndices = [];
         const requests = Object.entries(p)
             .map(([rowId, state]) => {
             if (!state)
                 return null;
+            // Mark as loading
+            loadingRows.add(rowId);
+            rowsForThis.add(rowId);
             const rowIndex = rowToIndex(rowId);
             if (rowIndex == null)
                 return null;
@@ -505,17 +513,32 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
                 return prev;
             });
         }
+        // Mark these groups as loading
+        rdsStore.set(loadingGroups$, 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$));
+            rowsForThis.forEach((c) => next.delete(c));
+            rdsStore.set(loadingGroups$, next);
+            setTimeout(() => {
+                grid?.state.rowDataStore.rowClearCache();
+            });
         }, (error) => {
             rdsStore.set(nodesWithError, (prev) => {
                 const n = new Map(prev);
                 rowIndices.forEach((c) => n.set(c, error));
                 return prev;
             });
+            const next = new Set(rdsStore.get(loadingGroups$));
+            rowsForThis.forEach((c) => next.delete(c));
+            rdsStore.set(loadingGroups$, next);
+            setTimeout(() => {
+                grid?.state.rowDataStore.rowClearCache();
+            });
         });
     };
     const rowToIndex = (rowId) => {
@@ -651,6 +674,9 @@ export function makeServerDataSource({ dataFetcher, dataColumnPivotFetcher, data
         rowSelect,
         rowSelectAll,
         rowSetBotData,
+        rowSetCenterData: () => {
+            throw new Error("Server side data source does not support full row updates");
+        },
         rowSetTopData,
         rowToIndex,
         rowUpdate,

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;