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

package/dist/components/data-grid.client.cjs

@@ -14,7 +14,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/data-grid.client.tsx
 function DataGridEl(props) {
 	const { data } = props;
-	const store = (0, react.useMemo)(() => require_store.createGridStore({
+	const [ready, setReady] = (0, _cerberus_design_signals.useSignal)(false);
+	const rootRef = (0, react.useRef)(null);
+	const store = (0, _cerberus_design_signals.useStore)(() => require_store.createGridStore({
 		data,
 		columns: props.columns,
 		initialState: props.initialState,
@@ -23,9 +25,7 @@ function DataGridEl(props) {
 		overlays: props.overlays,
 		pending: props.pending,
 		theme: props.theme
-	}), []);
-	const [ready, setReady] = (0, _cerberus_design_signals.useSignal)(false);
-	const rootRef = (0, react.useRef)(null);
+	}));
 	(0, react.useEffect)(() => {
 		store.updateData(data);
 	}, [data, store]);

package/dist/components/data-grid.client.js

@@ -7,14 +7,16 @@ import { GridPagination } from "./pagination.client.js";
 import { DGPopover, DGPopoverAnchor } from "./popover.client.js";
 import { GridViewport } from "./viewport.client.js";
 import { Show } from "@cerberus-design/react";
-import { createEffect, useSignal } from "@cerberus-design/signals";
-import { memo, useEffect, useMemo, useRef } from "react";
+import { createEffect, useSignal, useStore } from "@cerberus-design/signals";
+import { memo, useEffect, useRef } from "react";
 import { HStack, Stack } from "styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-grid.client.tsx
 function DataGridEl(props) {
 	const { data } = props;
-	const store = useMemo(() => createGridStore({
+	const [ready, setReady] = useSignal(false);
+	const rootRef = useRef(null);
+	const store = useStore(() => createGridStore({
 		data,
 		columns: props.columns,
 		initialState: props.initialState,
@@ -23,9 +25,7 @@ function DataGridEl(props) {
 		overlays: props.overlays,
 		pending: props.pending,
 		theme: props.theme
-	}), []);
-	const [ready, setReady] = useSignal(false);
-	const rootRef = useRef(null);
+	}));
 	useEffect(() => {
 		store.updateData(data);
 	}, [data, store]);

package/dist/components/grid.client.cjs

@@ -105,7 +105,6 @@ var GridHeaderCell = (0, react.memo)(function GridHeaderCell(props) {
 							openDelay: 800,
 							portal: true,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButtonRoot, {
-								clipboard: true,
 								size: "sm",
 								onClick: handleEditFilters,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditFilterIcon, {})

package/dist/components/grid.client.js

@@ -105,7 +105,6 @@ var GridHeaderCell = memo(function GridHeaderCell(props) {
 							openDelay: 800,
 							portal: true,
 							children: /* @__PURE__ */ jsx(IconButtonRoot, {
-								clipboard: true,
 								size: "sm",
 								onClick: handleEditFilters,
 								children: /* @__PURE__ */ jsx(EditFilterIcon, {})

package/dist/components/pagination.client.cjs

@@ -44,7 +44,7 @@ function GridPagination() {
 							textStyle: "label-sm",
 							userSelect: "none",
 							children: [
-								pagination.pageRange.start,
+								pagination.pageRange.start + 1,
 								"-",
 								pagination.pageRange.end,
 								" of",

package/dist/components/pagination.client.js

@@ -44,7 +44,7 @@ function GridPagination() {
 							textStyle: "label-sm",
 							userSelect: "none",
 							children: [
-								pagination.pageRange.start,
+								pagination.pageRange.start + 1,
 								"-",
 								pagination.pageRange.end,
 								" of",

package/dist/components/viewport.client.cjs

@@ -80,8 +80,7 @@ var TableRows = (0, react.memo)((props) => {
 	const store = require_context_client.useDataGridContext();
 	const { virtualRows, totalHeight } = require_virtualizer_client.useVirtualizer(store, props.viewportRef);
 	const isServerPaginated = (0, _cerberus_design_signals.useRead)(store.isServerPaginated);
-	const staticRows = (0, _cerberus_design_signals.useRead)(store.rows);
-	const currentPageRange = (0, _cerberus_design_signals.useRead)(store.currentPageRange);
+	const staticRows = (0, _cerberus_design_signals.useRead)(store.visibleRows);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
 		when: isServerPaginated,
 		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
@@ -102,7 +101,7 @@ var TableRows = (0, react.memo)((props) => {
 			gap: "0",
 			w: "var(--total-grid-width)",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
-				each: staticRows.slice(currentPageRange.start, currentPageRange.end),
+				each: staticRows,
 				children: (row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridRow, {
 					row,
 					index

package/dist/components/viewport.client.js

@@ -80,8 +80,7 @@ var TableRows = memo((props) => {
 	const store = useDataGridContext();
 	const { virtualRows, totalHeight } = useVirtualizer(store, props.viewportRef);
 	const isServerPaginated = useRead(store.isServerPaginated);
-	const staticRows = useRead(store.rows);
-	const currentPageRange = useRead(store.currentPageRange);
+	const staticRows = useRead(store.visibleRows);
 	return /* @__PURE__ */ jsx(Show, {
 		when: isServerPaginated,
 		fallback: /* @__PURE__ */ jsx(Box, {
@@ -102,7 +101,7 @@ var TableRows = memo((props) => {
 			gap: "0",
 			w: "var(--total-grid-width)",
 			children: /* @__PURE__ */ jsx(For, {
-				each: staticRows.slice(currentPageRange.start, currentPageRange.end),
+				each: staticRows,
 				children: (row, index) => /* @__PURE__ */ jsx(GridRow, {
 					row,
 					index

package/dist/context.client.cjs

@@ -3,15 +3,15 @@
 let _cerberus_design_signals = require("@cerberus-design/signals");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/context.client.tsx
-var { StoreProvider: BaseProvider, useStore: useBaseStore } = (0, _cerberus_design_signals.createStoreContext)();
+var { StoreProvider, useStore } = (0, _cerberus_design_signals.createStoreContext)();
 function DataGridProvider(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseProvider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StoreProvider, {
 		createStore: props.createStore,
 		children: props.children
 	});
 }
 function useDataGridContext() {
-	return useBaseStore();
+	return useStore();
 }
 //#endregion
 exports.DataGridProvider = DataGridProvider;

package/dist/context.client.d.cts

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { GridStore } from './types';
-export declare function DataGridProvider<TData>(props: {
+export declare function DataGridProvider<TData>(props: PropsWithChildren<{
     createStore: () => GridStore<TData>;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export declare function useDataGridContext<TData>(): GridStore<TData>;

package/dist/context.client.d.ts

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { GridStore } from './types';
-export declare function DataGridProvider<TData>(props: {
+export declare function DataGridProvider<TData>(props: PropsWithChildren<{
     createStore: () => GridStore<TData>;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export declare function useDataGridContext<TData>(): GridStore<TData>;

package/dist/context.client.js

@@ -3,15 +3,15 @@
 import { createStoreContext } from "@cerberus-design/signals";
 import { jsx } from "react/jsx-runtime";
 //#region src/context.client.tsx
-var { StoreProvider: BaseProvider, useStore: useBaseStore } = createStoreContext();
+var { StoreProvider, useStore: useStore$1 } = createStoreContext();
 function DataGridProvider(props) {
-	return /* @__PURE__ */ jsx(BaseProvider, {
+	return /* @__PURE__ */ jsx(StoreProvider, {
 		createStore: props.createStore,
 		children: props.children
 	});
 }
 function useDataGridContext() {
-	return useBaseStore();
+	return useStore$1();
 }
 //#endregion
 export { DataGridProvider, useDataGridContext };

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.11.0",
+  "schemaVersion": "1.11.1",
   "styles": {
     "atomic": [
       "display]___[value:flex",
@@ -192,6 +192,7 @@
       "colorPalette]___[value:page",
       "colorPalette]___[value:action",
       "colorPalette]___[value:secondary-action",
+      "colorPalette]___[value:secondaryAction",
       "colorPalette]___[value:info",
       "colorPalette]___[value:success",
       "colorPalette]___[value:warning",
@@ -347,6 +348,7 @@
         "size]___[value:xs]___[recipe:progressBar",
         "usage]___[value:block]___[recipe:progressBar"
       ],
+      "marquee": [],
       "toast": [],
       "group": [
         "orientation]___[value:horizontal]___[recipe:group",

package/dist/store.cjs

@@ -1,6 +1,10 @@
 "use client";
-const require_const = require("./const.cjs");
 const require_utils = require("./utils.cjs");
+const require_data = require("./stores/data.cjs");
+const require_pagination = require("./stores/pagination.cjs");
+const require_filter = require("./stores/filter.cjs");
+const require_sort = require("./stores/sort.cjs");
+const require_layout = require("./stores/layout.cjs");
 let _cerberus_design_signals = require("@cerberus-design/signals");
 //#region src/store.ts
 /**
@@ -8,294 +12,42 @@ let _cerberus_design_signals = require("@cerberus-design/signals");
 * the public Context API.
 */
 function createGridStore(options) {
-	const [containerWidth, setContainerWidth] = (0, _cerberus_design_signals.createSignal)(0);
-	const [rows, setRows] = (0, _cerberus_design_signals.createSignal)(options.data);
-	const [rowSize] = (0, _cerberus_design_signals.createSignal)(require_utils.determineRowHeight(options.rowSize));
-	const [pending, setPending] = (0, _cerberus_design_signals.createSignal)(options.pending ?? false);
-	const [hasSkeleton] = (0, _cerberus_design_signals.createSignal)(options.overlays?.pending === "skeleton");
-	const [showColFilter, setShowColFilter] = (0, _cerberus_design_signals.createSignal)(false);
-	const [globalFilter, setGlobalFilter] = (0, _cerberus_design_signals.createSignal)({
-		operator: require_const.OPERATORS.contains,
-		value: null
+	const dataStore = require_data.createDataStore(options);
+	const paginationStore = require_pagination.createPaginationStore(options);
+	const filterStore = require_filter.createFilterStore(dataStore);
+	const sortStore = require_sort.createSortStore({
+		columns: dataStore.columns,
+		filteredRows: filterStore.filteredRows
 	});
-	const [colFilters, setColFilters] = (0, _cerberus_design_signals.createSignal)({
-		active: [],
-		filters: {},
-		editing: null
-	});
-	const [sorting, setSorting] = (0, _cerberus_design_signals.createSignal)([]);
-	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)));
-	const [columns] = (0, _cerberus_design_signals.createSignal)(options.columns.map((col) => {
-		const pinnable = Boolean(col.features?.pinning);
-		const filterable = Boolean(col.features?.filter);
-		const sortable = Boolean(col.features?.sort);
-		const hasFeatures = pinnable || filterable || sortable;
-		const minWForFeatures = 100;
-		let finalWidth = col.width ?? 150;
-		if (hasFeatures && col.width && col.width < minWForFeatures) finalWidth = minWForFeatures;
-		const [isVisible] = (0, _cerberus_design_signals.createSignal)(true);
-		const [isFlex, setFlex] = (0, _cerberus_design_signals.createSignal)(col.width === void 0);
-		const [pinned, setPinned] = (0, _cerberus_design_signals.createSignal)(col.features?.pinning?.defaultPosition ?? false);
-		const [width, setColWidth] = (0, _cerberus_design_signals.createSignal)(finalWidth);
-		return {
-			id: col.id,
-			isFlex,
-			isVisible,
-			original: col,
-			pinned,
-			width,
-			getValue: col.accessor,
-			pinnable,
-			filterable,
-			sortable,
-			setFlex,
-			setPinned,
-			setColWidth
-		};
-	}));
-	const currentPageRange = (0, _cerberus_design_signals.createComputed)(() => {
-		const dataIdx = pageIndex() - 1;
-		return {
-			start: dataIdx === 0 ? 0 : dataIdx * pageSize() - 1,
-			end: pageIndex() * pageSize()
-		};
-	});
-	const filteredRows = (0, _cerberus_design_signals.createComputed)(() => {
-		let result = [...rows()];
-		const gFilter = globalFilter();
-		const cFilters = colFilters();
-		if (cFilters.active.length > 0) result = result.filter((row) => {
-			return cFilters.active.every((filterId) => {
-				const col = columns().find((c) => c.id === filterId);
-				const filter = cFilters.filters[filterId];
-				if (!col || !col.filterable) return true;
-				const customFn = typeof col.original.features?.filter === "function" ? col.original.features.filter : void 0;
-				if (customFn) return customFn(row, col.id, filter.value);
-				return require_utils.applyFilterOperator(col.getValue(row), filter.value, filter.operator);
-			});
-		});
-		if (gFilter.value) result = result.filter((row) => {
-			return columns().some((col) => {
-				if (!col.filterable) return false;
-				return require_utils.applyFilterOperator(col.getValue(row), gFilter.value, gFilter.operator);
-			});
-		});
-		return result;
-	});
-	const sortedRows = (0, _cerberus_design_signals.createComputed)(() => {
-		const currentRows = [...filteredRows()];
-		const sortState = sorting();
-		if (sortState.length === 0) return currentRows;
-		return currentRows.sort((a, b) => {
-			for (const sort of sortState) {
-				const col = columns().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;
-		});
+	const layoutStore = require_layout.createLayoutStore({
+		...options,
+		orderedColumns: dataStore.orderedColumns,
+		columns: dataStore.columns,
+		rowSize: dataStore.rowSize
 	});
 	const rowCount = (0, _cerberus_design_signals.createComputed)(() => {
-		return require_utils.determineInitialCount(options?.initialState?.pagination) ?? sortedRows().length;
+		return require_utils.determineInitialCount(options?.initialState?.pagination) ?? filterStore.filteredRows().length;
 	});
-	const pageCount = (0, _cerberus_design_signals.createComputed)(() => Math.ceil(rowCount() / pageSize()));
-	const orderedColumns = (0, _cerberus_design_signals.createComputed)(() => {
-		const left = [];
-		const center = [];
-		const right = [];
-		columns().forEach((col) => {
-			const pin = col.pinned();
-			if (pin === "left") left.push(col);
-			else if (pin === "right") right.push(col);
-			else center.push(col);
-		});
-		return [
-			...left,
-			...center,
-			...right
-		];
+	const pageCount = (0, _cerberus_design_signals.createComputed)(() => Math.ceil(rowCount() / paginationStore.pageSize()));
+	const visibleRows = (0, _cerberus_design_signals.createComputed)(() => {
+		const size = paginationStore.pageSize();
+		const rows = sortStore.sortedRows();
+		if (paginationStore.isServerPaginated()) return rows;
+		if (size) {
+			const ctx = paginationStore.currentPageRange();
+			return rows.slice(ctx.start, ctx.end);
+		}
+		return rows;
 	});
 	return {
-		columns,
-		rows,
+		...dataStore,
+		...paginationStore,
+		...filterStore,
+		...sortStore,
+		...layoutStore,
 		rowCount,
-		rowSize,
-		visibleRows: (0, _cerberus_design_signals.createComputed)(() => {
-			if (pageSize() && pageCount() > 1) {
-				const currentRange = currentPageRange();
-				return sortedRows().slice(currentRange.start, currentRange.end);
-			}
-			return sortedRows();
-		}),
-		showColFilter,
-		globalFilter,
-		colFilters,
-		sorting,
-		pending,
-		hasSkeleton,
 		pageCount,
-		pageIndex,
-		pageSize,
-		pageRange,
-		currentPageRange,
-		isServerPaginated,
-		rootCssVars: (0, _cerberus_design_signals.createComputed)(() => {
-			const vars = {};
-			const visibleCols = [];
-			const cols = 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 = 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"] = `${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)(() => columns().reduce((acc, c) => acc + c.width(), 0)),
-		updateData: (newData) => {
-			setRows(newData);
-		},
-		updatePending: (newState) => {
-			setPending(newState);
-		},
-		setSort: (colId, direction, multi = false) => {
-			if (direction === null) {
-				setSorting(sorting().filter((s) => s.id !== colId));
-				return;
-			}
-			const current = sorting();
-			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]);
-		},
-		togglePinned: (colId, state) => {
-			const col = columns().find((c) => c.id === colId);
-			if (col) col.setPinned(state ?? false);
-		},
-		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]);
-			}
-		},
-		setPage: (details) => {
-			setPageIndex(details.page);
-			options.onPageChange?.(details);
-		},
-		setPageSize: (size) => {
-			if (isServerPaginated()) setPageIndex(1);
-			setPageSize(size);
-		},
-		setGlobalFilter: (val) => {
-			(0, _cerberus_design_signals.batch)(() => {
-				setGlobalFilter((prev) => ({
-					...prev,
-					...val
-				}));
-				setPageIndex(1);
-			});
-		},
-		setColFilter: (val) => {
-			setColFilters(val);
-		},
-		setShowColFilter: (val) => {
-			setShowColFilter(val);
-		},
-		setContainerWidth: (w) => {
-			setContainerWidth(w);
-		},
-		resizeColumn: (colId, delta) => {
-			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));
-			}
-		}
+		visibleRows
 	};
 }
 //#endregion