@cerberus-design/data-grid 1.3.0-rc.3 → 1.4.0-rc.1

package/dist/stores/layout.cjs

@@ -0,0 +1,97 @@
+"use client";
+const require_const = require("../const.cjs");
+let _cerberus_design_signals = require("@cerberus-design/signals");
+//#region src/stores/layout.ts
+function createLayoutStore(options) {
+	const [containerWidth, setContainerWidth] = (0, _cerberus_design_signals.createSignal)(0);
+	const [pending, setPending] = (0, _cerberus_design_signals.createSignal)(options.pending ?? false);
+	const [hasSkeleton] = (0, _cerberus_design_signals.createSignal)(options.overlays?.pending === "skeleton");
+	return {
+		pending,
+		hasSkeleton,
+		rootCssVars: (0, _cerberus_design_signals.createComputed)(() => {
+			const vars = {};
+			const visibleCols = [];
+			const cols = options.columns();
+			const cWidth = containerWidth();
+			let fixedSpace = 0;
+			let flexCount = 0;
+			for (let i = 0; i < cols.length; i++) {
+				const col = cols[i];
+				if (!col.isVisible()) continue;
+				visibleCols.push(col);
+				if (col.isFlex()) flexCount++;
+				else fixedSpace += col.width();
+				const order = options.orderedColumns().findIndex((orderedCol) => orderedCol.id === col.id);
+				vars[`--col-${col.id}-order`] = `${order}`;
+			}
+			const remainingSpace = Math.max(0, cWidth - fixedSpace);
+			const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
+			let leftOffset = 0;
+			let totalW = 0;
+			const computedWidths = new Float64Array(visibleCols.length);
+			for (let i = 0; i < visibleCols.length; i++) {
+				const col = visibleCols[i];
+				let finalWidth = col.width();
+				if (col.isFlex()) finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
+				computedWidths[i] = finalWidth;
+				totalW += finalWidth;
+				vars[`--col-${col.id}-width`] = `${finalWidth}px`;
+				if (col.pinned() === "left") {
+					vars[`--col-${col.id}-left`] = `${leftOffset}px`;
+					leftOffset += finalWidth;
+				}
+			}
+			let rightOffset = 0;
+			for (let i = visibleCols.length - 1; i >= 0; i--) {
+				const col = visibleCols[i];
+				if (col.pinned() === "right") {
+					vars[`--col-${col.id}-right`] = `${rightOffset}px`;
+					rightOffset += computedWidths[i];
+				}
+			}
+			vars["--total-grid-width"] = `${totalW}px`;
+			vars["--row-height"] = `${options.rowSize()}px`;
+			const theme = {
+				...require_const.DEFAULT_THEME,
+				...options.theme
+			};
+			vars["--border"] = theme.border;
+			vars["--border-color"] = theme.borderColor;
+			vars["--rounded"] = theme.rounded;
+			vars["--row-bg-color"] = theme.rowBgColor;
+			vars["--row-even-bg-color"] = theme.rowEvenBgColor;
+			vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
+			vars["--head-cell-bg-color"] = theme.headCellBgColor;
+			vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
+			vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
+			vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
+			return vars;
+		}),
+		totalWidth: (0, _cerberus_design_signals.createComputed)(() => options.columns().reduce((acc, c) => acc + c.width(), 0)),
+		resizeColumn: (colId, delta) => {
+			const columns = options.columns();
+			const col = columns.find((c) => c.id === colId);
+			if (col) {
+				if (col.isFlex()) {
+					const fixedSpace = columns.filter((c) => !c.isFlex()).reduce((a, b) => a + b.width(), 0);
+					const flexCount = columns.filter((c) => c.isFlex()).length;
+					const currentFlexWidth = Math.max(col.original.minWidth ?? 150, (containerWidth() - fixedSpace) / flexCount);
+					col.setColWidth(currentFlexWidth);
+					col.setFlex(false);
+				}
+				col.setColWidth(Math.max(col.original.minWidth ?? 50, col.width() + delta));
+			}
+		},
+		setContainerWidth,
+		togglePinned: (colId, state) => {
+			const col = options.columns().find((c) => c.id === colId);
+			if (col) col.setPinned(state ?? false);
+		},
+		updatePending: (newState) => {
+			setPending(newState);
+		}
+	};
+}
+//#endregion
+exports.createLayoutStore = createLayoutStore;

package/dist/stores/layout.d.cts

@@ -0,0 +1,21 @@
+import { Accessor, Setter } from '@cerberus-design/signals';
+import { GridOptions, PinnedState } from '../types';
+import { DataStore } from './data';
+type LayoutStore = {
+    pending: Accessor<boolean>;
+    hasSkeleton: Accessor<boolean>;
+    rootCssVars: Accessor<Record<string, string>>;
+    totalWidth: Accessor<number>;
+    resizeColumn: (colId: string, delta: number) => void;
+    setContainerWidth: Setter<number>;
+    togglePinned: (colId: string, state: PinnedState) => void;
+    updatePending: (newState: boolean) => void;
+};
+type LayoutGridOptions<T> = Omit<GridOptions<T>, 'columns' | 'rowSize'>;
+type Options<T> = {
+    columns: DataStore<T>['columns'];
+    orderedColumns: DataStore<T>['orderedColumns'];
+    rowSize: DataStore<T>['rowSize'];
+} & LayoutGridOptions<T>;
+export declare function createLayoutStore<T>(options: Options<T>): LayoutStore;
+export {};

package/dist/stores/layout.d.ts

@@ -0,0 +1,21 @@
+import { Accessor, Setter } from '@cerberus-design/signals';
+import { GridOptions, PinnedState } from '../types';
+import { DataStore } from './data';
+type LayoutStore = {
+    pending: Accessor<boolean>;
+    hasSkeleton: Accessor<boolean>;
+    rootCssVars: Accessor<Record<string, string>>;
+    totalWidth: Accessor<number>;
+    resizeColumn: (colId: string, delta: number) => void;
+    setContainerWidth: Setter<number>;
+    togglePinned: (colId: string, state: PinnedState) => void;
+    updatePending: (newState: boolean) => void;
+};
+type LayoutGridOptions<T> = Omit<GridOptions<T>, 'columns' | 'rowSize'>;
+type Options<T> = {
+    columns: DataStore<T>['columns'];
+    orderedColumns: DataStore<T>['orderedColumns'];
+    rowSize: DataStore<T>['rowSize'];
+} & LayoutGridOptions<T>;
+export declare function createLayoutStore<T>(options: Options<T>): LayoutStore;
+export {};

package/dist/stores/layout.js

@@ -0,0 +1,97 @@
+"use client";
+import { DEFAULT_THEME } from "../const.js";
+import { createComputed, createSignal } from "@cerberus-design/signals";
+//#region src/stores/layout.ts
+function createLayoutStore(options) {
+	const [containerWidth, setContainerWidth] = createSignal(0);
+	const [pending, setPending] = createSignal(options.pending ?? false);
+	const [hasSkeleton] = createSignal(options.overlays?.pending === "skeleton");
+	return {
+		pending,
+		hasSkeleton,
+		rootCssVars: createComputed(() => {
+			const vars = {};
+			const visibleCols = [];
+			const cols = options.columns();
+			const cWidth = containerWidth();
+			let fixedSpace = 0;
+			let flexCount = 0;
+			for (let i = 0; i < cols.length; i++) {
+				const col = cols[i];
+				if (!col.isVisible()) continue;
+				visibleCols.push(col);
+				if (col.isFlex()) flexCount++;
+				else fixedSpace += col.width();
+				const order = options.orderedColumns().findIndex((orderedCol) => orderedCol.id === col.id);
+				vars[`--col-${col.id}-order`] = `${order}`;
+			}
+			const remainingSpace = Math.max(0, cWidth - fixedSpace);
+			const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
+			let leftOffset = 0;
+			let totalW = 0;
+			const computedWidths = new Float64Array(visibleCols.length);
+			for (let i = 0; i < visibleCols.length; i++) {
+				const col = visibleCols[i];
+				let finalWidth = col.width();
+				if (col.isFlex()) finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
+				computedWidths[i] = finalWidth;
+				totalW += finalWidth;
+				vars[`--col-${col.id}-width`] = `${finalWidth}px`;
+				if (col.pinned() === "left") {
+					vars[`--col-${col.id}-left`] = `${leftOffset}px`;
+					leftOffset += finalWidth;
+				}
+			}
+			let rightOffset = 0;
+			for (let i = visibleCols.length - 1; i >= 0; i--) {
+				const col = visibleCols[i];
+				if (col.pinned() === "right") {
+					vars[`--col-${col.id}-right`] = `${rightOffset}px`;
+					rightOffset += computedWidths[i];
+				}
+			}
+			vars["--total-grid-width"] = `${totalW}px`;
+			vars["--row-height"] = `${options.rowSize()}px`;
+			const theme = {
+				...DEFAULT_THEME,
+				...options.theme
+			};
+			vars["--border"] = theme.border;
+			vars["--border-color"] = theme.borderColor;
+			vars["--rounded"] = theme.rounded;
+			vars["--row-bg-color"] = theme.rowBgColor;
+			vars["--row-even-bg-color"] = theme.rowEvenBgColor;
+			vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
+			vars["--head-cell-bg-color"] = theme.headCellBgColor;
+			vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
+			vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
+			vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
+			return vars;
+		}),
+		totalWidth: createComputed(() => options.columns().reduce((acc, c) => acc + c.width(), 0)),
+		resizeColumn: (colId, delta) => {
+			const columns = options.columns();
+			const col = columns.find((c) => c.id === colId);
+			if (col) {
+				if (col.isFlex()) {
+					const fixedSpace = columns.filter((c) => !c.isFlex()).reduce((a, b) => a + b.width(), 0);
+					const flexCount = columns.filter((c) => c.isFlex()).length;
+					const currentFlexWidth = Math.max(col.original.minWidth ?? 150, (containerWidth() - fixedSpace) / flexCount);
+					col.setColWidth(currentFlexWidth);
+					col.setFlex(false);
+				}
+				col.setColWidth(Math.max(col.original.minWidth ?? 50, col.width() + delta));
+			}
+		},
+		setContainerWidth,
+		togglePinned: (colId, state) => {
+			const col = options.columns().find((c) => c.id === colId);
+			if (col) col.setPinned(state ?? false);
+		},
+		updatePending: (newState) => {
+			setPending(newState);
+		}
+	};
+}
+//#endregion
+export { createLayoutStore };

package/dist/stores/pagination.cjs

@@ -0,0 +1,35 @@
+"use client";
+const require_utils = require("../utils.cjs");
+let _cerberus_design_signals = require("@cerberus-design/signals");
+//#region src/stores/pagination.ts
+function createPaginationStore(options) {
+	const [pageIndex, setPageIndex] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageIndex(options.initialState?.pagination));
+	const [pageSize, setPageSize] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageSize(options.initialState?.pagination));
+	const [pageRange] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageRange(options.initialState?.pagination));
+	const [isServerPaginated] = (0, _cerberus_design_signals.createSignal)(Boolean(require_utils.determineInitialCount(options.initialState?.pagination)));
+	return {
+		currentPageRange: (0, _cerberus_design_signals.createComputed)(() => {
+			const idx = pageIndex();
+			const size = pageSize();
+			return {
+				start: (idx - 1) * size,
+				end: idx * size
+			};
+		}),
+		pageIndex,
+		pageSize,
+		pageRange,
+		isServerPaginated,
+		setPage: (details) => {
+			setPageIndex(details.page);
+			options.onPageChange?.(details);
+		},
+		setPageIndex,
+		setPageSize: (size) => {
+			if (isServerPaginated()) setPageIndex(1);
+			setPageSize(size);
+		}
+	};
+}
+//#endregion
+exports.createPaginationStore = createPaginationStore;

package/dist/stores/pagination.d.cts

@@ -0,0 +1,18 @@
+import { PageDetails } from '@cerberus-design/react';
+import { Accessor, Setter } from '@cerberus-design/signals';
+import { GridOptions } from '../types';
+type PaginationStore = {
+    currentPageRange: Accessor<{
+        start: number;
+        end: number;
+    }>;
+    pageIndex: Accessor<number>;
+    pageSize: Accessor<number>;
+    pageRange: Accessor<number[]>;
+    isServerPaginated: Accessor<boolean>;
+    setPage: (details: PageDetails) => void;
+    setPageIndex: Setter<number>;
+    setPageSize: (size: number) => void;
+};
+export declare function createPaginationStore<TData>(options: GridOptions<TData>): PaginationStore;
+export {};

package/dist/stores/pagination.d.ts

@@ -0,0 +1,18 @@
+import { PageDetails } from '@cerberus-design/react';
+import { Accessor, Setter } from '@cerberus-design/signals';
+import { GridOptions } from '../types';
+type PaginationStore = {
+    currentPageRange: Accessor<{
+        start: number;
+        end: number;
+    }>;
+    pageIndex: Accessor<number>;
+    pageSize: Accessor<number>;
+    pageRange: Accessor<number[]>;
+    isServerPaginated: Accessor<boolean>;
+    setPage: (details: PageDetails) => void;
+    setPageIndex: Setter<number>;
+    setPageSize: (size: number) => void;
+};
+export declare function createPaginationStore<TData>(options: GridOptions<TData>): PaginationStore;
+export {};

package/dist/stores/pagination.js

@@ -0,0 +1,35 @@
+"use client";
+import { determineInitialCount, determinePageIndex, determinePageRange, determinePageSize } from "../utils.js";
+import { createComputed, createSignal } from "@cerberus-design/signals";
+//#region src/stores/pagination.ts
+function createPaginationStore(options) {
+	const [pageIndex, setPageIndex] = createSignal(determinePageIndex(options.initialState?.pagination));
+	const [pageSize, setPageSize] = createSignal(determinePageSize(options.initialState?.pagination));
+	const [pageRange] = createSignal(determinePageRange(options.initialState?.pagination));
+	const [isServerPaginated] = createSignal(Boolean(determineInitialCount(options.initialState?.pagination)));
+	return {
+		currentPageRange: createComputed(() => {
+			const idx = pageIndex();
+			const size = pageSize();
+			return {
+				start: (idx - 1) * size,
+				end: idx * size
+			};
+		}),
+		pageIndex,
+		pageSize,
+		pageRange,
+		isServerPaginated,
+		setPage: (details) => {
+			setPageIndex(details.page);
+			options.onPageChange?.(details);
+		},
+		setPageIndex,
+		setPageSize: (size) => {
+			if (isServerPaginated()) setPageIndex(1);
+			setPageSize(size);
+		}
+	};
+}
+//#endregion
+export { createPaginationStore };

package/dist/stores/sort.cjs

@@ -0,0 +1,70 @@
+"use client";
+let _cerberus_design_signals = require("@cerberus-design/signals");
+//#region src/stores/sort.ts
+function createSortStore(options) {
+	const [sorting, setSorting] = (0, _cerberus_design_signals.createSignal)([]);
+	return {
+		sorting,
+		sortedRows: (0, _cerberus_design_signals.createComputed)(() => {
+			const currentRows = [...options.filteredRows()];
+			const sortState = sorting();
+			const cols = options.columns();
+			if (sortState.length === 0) return currentRows;
+			return currentRows.sort((a, b) => {
+				for (const sort of sortState) {
+					const col = cols.find((c) => c.id === sort.id);
+					if (!col) continue;
+					const valA = col.getValue(a);
+					const valB = col.getValue(b);
+					if (valA === valB) continue;
+					let comparison = 0;
+					const customComparator = typeof col.original.features?.sort === "object" ? col.original.features.sort.comparator : void 0;
+					if (customComparator) comparison = customComparator(valA, valB);
+					else comparison = valA > valB ? 1 : -1;
+					return sort.desc ? -comparison : comparison;
+				}
+				return 0;
+			});
+		}),
+		setSort: (colId, direction, multi = false) => {
+			const current = sorting();
+			if (direction === null) {
+				setSorting(current.filter((s) => s.id !== colId));
+				return;
+			}
+			const newSort = {
+				id: colId,
+				desc: direction === "desc"
+			};
+			if (multi) {
+				const existingIndex = current.findIndex((s) => s.id === colId);
+				if (existingIndex >= 0) {
+					const next = [...current];
+					next[existingIndex] = newSort;
+					setSorting(next);
+				} else setSorting([...current, newSort]);
+			} else setSorting([newSort]);
+		},
+		toggleSort: (colId, multi) => {
+			const current = sorting();
+			const exists = current.findIndex((s) => s.id === colId) !== -1;
+			const updatedSort = current.map((s) => {
+				if (s.id === colId) return {
+					...s,
+					desc: !s.desc
+				};
+				return s;
+			});
+			if (exists) setSorting(multi ? [...current, ...updatedSort] : [...updatedSort]);
+			else {
+				const newSort = {
+					id: colId,
+					desc: true
+				};
+				setSorting(multi ? [...current, newSort] : [newSort]);
+			}
+		}
+	};
+}
+//#endregion
+exports.createSortStore = createSortStore;

package/dist/stores/sort.d.cts

@@ -0,0 +1,16 @@
+import { Accessor } from '@cerberus-design/signals';
+import { SortState } from '../types';
+import { DataStore } from './data';
+import { FilterStore } from './filter';
+type SortStore<TData> = {
+    sorting: Accessor<SortState[]>;
+    sortedRows: Accessor<TData[]>;
+    setSort: (colId: string, direction: 'asc' | 'desc' | null, multi?: boolean) => void;
+    toggleSort: (colId: string, multi?: boolean) => void;
+};
+type Options<TData> = {
+    columns: DataStore<TData>['columns'];
+    filteredRows: FilterStore<TData>['filteredRows'];
+};
+export declare function createSortStore<TData>(options: Options<TData>): SortStore<TData>;
+export {};

package/dist/stores/sort.d.ts

@@ -0,0 +1,16 @@
+import { Accessor } from '@cerberus-design/signals';
+import { SortState } from '../types';
+import { DataStore } from './data';
+import { FilterStore } from './filter';
+type SortStore<TData> = {
+    sorting: Accessor<SortState[]>;
+    sortedRows: Accessor<TData[]>;
+    setSort: (colId: string, direction: 'asc' | 'desc' | null, multi?: boolean) => void;
+    toggleSort: (colId: string, multi?: boolean) => void;
+};
+type Options<TData> = {
+    columns: DataStore<TData>['columns'];
+    filteredRows: FilterStore<TData>['filteredRows'];
+};
+export declare function createSortStore<TData>(options: Options<TData>): SortStore<TData>;
+export {};

package/dist/stores/sort.js

@@ -0,0 +1,70 @@
+"use client";
+import { createComputed, createSignal } from "@cerberus-design/signals";
+//#region src/stores/sort.ts
+function createSortStore(options) {
+	const [sorting, setSorting] = createSignal([]);
+	return {
+		sorting,
+		sortedRows: createComputed(() => {
+			const currentRows = [...options.filteredRows()];
+			const sortState = sorting();
+			const cols = options.columns();
+			if (sortState.length === 0) return currentRows;
+			return currentRows.sort((a, b) => {
+				for (const sort of sortState) {
+					const col = cols.find((c) => c.id === sort.id);
+					if (!col) continue;
+					const valA = col.getValue(a);
+					const valB = col.getValue(b);
+					if (valA === valB) continue;
+					let comparison = 0;
+					const customComparator = typeof col.original.features?.sort === "object" ? col.original.features.sort.comparator : void 0;
+					if (customComparator) comparison = customComparator(valA, valB);
+					else comparison = valA > valB ? 1 : -1;
+					return sort.desc ? -comparison : comparison;
+				}
+				return 0;
+			});
+		}),
+		setSort: (colId, direction, multi = false) => {
+			const current = sorting();
+			if (direction === null) {
+				setSorting(current.filter((s) => s.id !== colId));
+				return;
+			}
+			const newSort = {
+				id: colId,
+				desc: direction === "desc"
+			};
+			if (multi) {
+				const existingIndex = current.findIndex((s) => s.id === colId);
+				if (existingIndex >= 0) {
+					const next = [...current];
+					next[existingIndex] = newSort;
+					setSorting(next);
+				} else setSorting([...current, newSort]);
+			} else setSorting([newSort]);
+		},
+		toggleSort: (colId, multi) => {
+			const current = sorting();
+			const exists = current.findIndex((s) => s.id === colId) !== -1;
+			const updatedSort = current.map((s) => {
+				if (s.id === colId) return {
+					...s,
+					desc: !s.desc
+				};
+				return s;
+			});
+			if (exists) setSorting(multi ? [...current, ...updatedSort] : [...updatedSort]);
+			else {
+				const newSort = {
+					id: colId,
+					desc: true
+				};
+				setSorting(multi ? [...current, newSort] : [newSort]);
+			}
+		}
+	};
+}
+//#endregion
+export { createSortStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/data-grid",
-  "version": "1.3.0-rc.3",
+  "version": "1.4.0-rc.1",
   "description": "The Cerberus Design React DataGrid component.",
   "keywords": [
     "data grid",
@@ -27,20 +27,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@cerberus-design/react": "1.3.0-rc.3",
-    "@cerberus-design/signals": "1.3.0-rc.3"
+    "@cerberus-design/signals": "1.4.0-rc.1",
+    "@cerberus-design/react": "1.4.0-rc.1"
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.11.0",
-    "@types/react": "^19.2.14",
+    "@pandacss/dev": "^1.11.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "globby": "^16.2.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^5.0.0",
-    "@cerberus/panda-preset": "1.3.0-rc.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "vite": "^8.0.14",
+    "vite-plugin-dts": "^5.0.1",
+    "@cerberus/panda-preset": "1.4.0-rc.1",
     "styled-system": "0.0.0"
   },
   "peerDependencies": {
@@ -55,6 +55,14 @@
     "clean": "rm -rf ./dist",
     "lint:ts": "tsc --project tsconfig.lint.json --noEmit"
   },
+  "types": "dist/index.d.cts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "dist/index.d.cts"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "import": {
@@ -67,13 +75,5 @@
       }
     },
     "./package.json": "./package.json"
-  },
-  "types": "dist/index.d.cts",
-  "typesVersions": {
-    "*": {
-      ".": [
-        "dist/index.d.cts"
-      ]
-    }
   }
 }