@cerberus-design/data-grid 1.1.3 → 1.2.0

package/dist/components/popover.client.cjs

@@ -0,0 +1,186 @@
+"use client";
+"use client";
+const require_const = require("../const.cjs");
+const require_context_client = require("../context.client.cjs");
+let _cerberus_design_react = require("@cerberus-design/react");
+let _cerberus_design_signals = require("@cerberus-design/signals");
+let styled_system_jsx = require("styled-system/jsx");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region src/components/popover.client.tsx
+function DGPopover(props) {
+	const store = require_context_client.useDataGridContext();
+	const colH = (0, _cerberus_design_signals.useRead)(store.rowSize);
+	const open = (0, _cerberus_design_signals.useRead)(store.showColFilter);
+	const mainAxis = 119 + colH;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.PopoverParts.Root, {
+		...props,
+		lazyMount: true,
+		open,
+		onOpenChange: (details) => {
+			if (!details.open) store.setColFilter((prev) => ({
+				...prev,
+				active: prev.active.filter((filterId) => prev.filters[filterId].value),
+				editing: null
+			}));
+			store.setShowColFilter(details.open);
+		},
+		portalled: true,
+		positioning: {
+			placement: "top-start",
+			offset: { mainAxis: -mainAxis }
+		}
+	});
+}
+function DGPopoverAnchor(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.PopoverParts.Anchor, {
+		...props,
+		asChild: true
+	});
+}
+function DGPopoverContent(props) {
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const CloseIcon = icons?.close;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Portal, {
+		container: props.ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.PopoverParts.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.PopoverParts.Content, {
+			css: { "--popover-size": "37.5rem!" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.PopoverParts.Header, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.PopoverParts.CloseTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButtonRoot, {
+					size: "sm",
+					usage: "ghost",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.PopoverParts.Title, {
+				textStyle: "label-md",
+				children: "Filter By Column"
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterForm, {})]
+		}) })
+	});
+}
+function FilterForm() {
+	const store = require_context_client.useDataGridContext();
+	function filter(formData) {
+		const payload = {
+			id: formData.get("column"),
+			operator: formData.get("operator"),
+			value: formData.get("value")
+		};
+		(0, _cerberus_design_signals.batch)(() => {
+			store.setColFilter((prev) => ({
+				...prev,
+				active: [...prev.active, payload.id],
+				filters: {
+					...prev.filters,
+					[payload.id]: payload
+				},
+				editing: null
+			}));
+			store.setShowColFilter(false);
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.cerberus.form, {
+		action: filter,
+		w: "full",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.PopoverParts.Body, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormFields, {}) })
+	});
+}
+function FormFields() {
+	const status = (0, react_dom.useFormStatus)();
+	const store = require_context_client.useDataGridContext();
+	const cols = (0, _cerberus_design_signals.useRead)(store.columns);
+	const colFilters = (0, _cerberus_design_signals.useRead)(store.colFilters);
+	const filterToEdit = (0, _cerberus_design_signals.createComputed)(() => {
+		return colFilters.filters[colFilters.editing];
+	});
+	const colCollection = (0, _cerberus_design_react.createSelectCollection)(cols.map((col) => ({
+		value: col.id,
+		label: String(col.original.header)
+	})));
+	const operatorCollection = (0, _cerberus_design_react.createSelectCollection)(Object.keys(require_const.OPERATORS).map((key) => ({
+		value: key,
+		label: require_const.OPERATORS[key].replaceAll("_", " ")
+	})));
+	if (!filterToEdit()) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Stack, {
+		direction: "column",
+		gap: "sm",
+		w: "full",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSection, {
+			colCollection,
+			operatorCollection,
+			defaultColValue: cols[0].id,
+			filter: filterToEdit(),
+			status
+		})
+	});
+}
+function FormSection(props) {
+	const { filter } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+		gap: "sm",
+		w: "full",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Field, {
+				label: "Select a column",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Select, {
+					collection: props.colCollection,
+					name: "column",
+					placeholder: "Choose option",
+					size: "sm",
+					defaultValue: [filter?.id ?? props.defaultColValue],
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
+						each: props.colCollection.items,
+						children: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Option, { item }, item.value)
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Field, {
+				label: "Select a operator",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Select, {
+					collection: props.operatorCollection,
+					name: "operator",
+					placeholder: "Choose option",
+					size: "sm",
+					defaultValue: [filter?.operator ?? require_const.OPERATORS.contains],
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
+						each: props.operatorCollection.items,
+						children: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Option, { item }, item.value)
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Field, {
+				label: "Value",
+				required: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Input, {
+					name: "value",
+					size: "sm",
+					defaultValue: filter?.value
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmitButton, { pending: props.status.pending })
+		]
+	});
+}
+function SubmitButton(props) {
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const { arrowRight: Icon } = icons;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
+		alignSelf: "flex-end",
+		mb: "0.25rem",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButton, {
+			ariaLabel: "Submit form",
+			disabled: props.pending,
+			type: "submit",
+			usage: "filled",
+			h: "2rem!",
+			w: "2rem!",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+		})
+	});
+}
+//#endregion
+exports.DGPopover = DGPopover;
+exports.DGPopoverAnchor = DGPopoverAnchor;
+exports.DGPopoverContent = DGPopoverContent;

package/dist/components/popover.client.d.cts

@@ -0,0 +1,9 @@
+import { PopoverRootProps } from '@cerberus-design/react';
+import { HTMLAttributes, PropsWithChildren, RefObject } from 'react';
+export declare function DGPopover(props: PropsWithChildren<PopoverRootProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DGPopoverAnchor(props: PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
+interface DGPopoverContentProps {
+    ref: RefObject<HTMLDivElement | null>;
+}
+export declare function DGPopoverContent(props: DGPopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/popover.client.d.ts

@@ -0,0 +1,9 @@
+import { PopoverRootProps } from '@cerberus-design/react';
+import { HTMLAttributes, PropsWithChildren, RefObject } from 'react';
+export declare function DGPopover(props: PropsWithChildren<PopoverRootProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DGPopoverAnchor(props: PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
+interface DGPopoverContentProps {
+    ref: RefObject<HTMLDivElement | null>;
+}
+export declare function DGPopoverContent(props: DGPopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/popover.client.js

@@ -0,0 +1,184 @@
+"use client";
+"use client";
+import { OPERATORS } from "../const.js";
+import { useDataGridContext } from "../context.client.js";
+import { Field, For, IconButton, IconButtonRoot, Input, Option, PopoverParts, Portal, Select, cerberus, createSelectCollection, useCerberusContext } from "@cerberus-design/react";
+import { batch, createComputed, useRead } from "@cerberus-design/signals";
+import { Box, HStack, Stack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormStatus } from "react-dom";
+//#region src/components/popover.client.tsx
+function DGPopover(props) {
+	const store = useDataGridContext();
+	const colH = useRead(store.rowSize);
+	const open = useRead(store.showColFilter);
+	const mainAxis = 119 + colH;
+	return /* @__PURE__ */ jsx(PopoverParts.Root, {
+		...props,
+		lazyMount: true,
+		open,
+		onOpenChange: (details) => {
+			if (!details.open) store.setColFilter((prev) => ({
+				...prev,
+				active: prev.active.filter((filterId) => prev.filters[filterId].value),
+				editing: null
+			}));
+			store.setShowColFilter(details.open);
+		},
+		portalled: true,
+		positioning: {
+			placement: "top-start",
+			offset: { mainAxis: -mainAxis }
+		}
+	});
+}
+function DGPopoverAnchor(props) {
+	return /* @__PURE__ */ jsx(PopoverParts.Anchor, {
+		...props,
+		asChild: true
+	});
+}
+function DGPopoverContent(props) {
+	const { icons } = useCerberusContext();
+	const CloseIcon = icons?.close;
+	return /* @__PURE__ */ jsx(Portal, {
+		container: props.ref,
+		children: /* @__PURE__ */ jsx(PopoverParts.Positioner, { children: /* @__PURE__ */ jsxs(PopoverParts.Content, {
+			css: { "--popover-size": "37.5rem!" },
+			children: [/* @__PURE__ */ jsxs(PopoverParts.Header, { children: [/* @__PURE__ */ jsx(PopoverParts.CloseTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(IconButtonRoot, {
+					size: "sm",
+					usage: "ghost",
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})
+			}), /* @__PURE__ */ jsx(PopoverParts.Title, {
+				textStyle: "label-md",
+				children: "Filter By Column"
+			})] }), /* @__PURE__ */ jsx(FilterForm, {})]
+		}) })
+	});
+}
+function FilterForm() {
+	const store = useDataGridContext();
+	function filter(formData) {
+		const payload = {
+			id: formData.get("column"),
+			operator: formData.get("operator"),
+			value: formData.get("value")
+		};
+		batch(() => {
+			store.setColFilter((prev) => ({
+				...prev,
+				active: [...prev.active, payload.id],
+				filters: {
+					...prev.filters,
+					[payload.id]: payload
+				},
+				editing: null
+			}));
+			store.setShowColFilter(false);
+		});
+	}
+	return /* @__PURE__ */ jsx(cerberus.form, {
+		action: filter,
+		w: "full",
+		children: /* @__PURE__ */ jsx(PopoverParts.Body, { children: /* @__PURE__ */ jsx(FormFields, {}) })
+	});
+}
+function FormFields() {
+	const status = useFormStatus();
+	const store = useDataGridContext();
+	const cols = useRead(store.columns);
+	const colFilters = useRead(store.colFilters);
+	const filterToEdit = createComputed(() => {
+		return colFilters.filters[colFilters.editing];
+	});
+	const colCollection = createSelectCollection(cols.map((col) => ({
+		value: col.id,
+		label: String(col.original.header)
+	})));
+	const operatorCollection = createSelectCollection(Object.keys(OPERATORS).map((key) => ({
+		value: key,
+		label: OPERATORS[key].replaceAll("_", " ")
+	})));
+	if (!filterToEdit()) return null;
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		gap: "sm",
+		w: "full",
+		children: /* @__PURE__ */ jsx(FormSection, {
+			colCollection,
+			operatorCollection,
+			defaultColValue: cols[0].id,
+			filter: filterToEdit(),
+			status
+		})
+	});
+}
+function FormSection(props) {
+	const { filter } = props;
+	return /* @__PURE__ */ jsxs(HStack, {
+		gap: "sm",
+		w: "full",
+		children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "Select a column",
+				children: /* @__PURE__ */ jsx(Select, {
+					collection: props.colCollection,
+					name: "column",
+					placeholder: "Choose option",
+					size: "sm",
+					defaultValue: [filter?.id ?? props.defaultColValue],
+					children: /* @__PURE__ */ jsx(For, {
+						each: props.colCollection.items,
+						children: (item) => /* @__PURE__ */ jsx(Option, { item }, item.value)
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "Select a operator",
+				children: /* @__PURE__ */ jsx(Select, {
+					collection: props.operatorCollection,
+					name: "operator",
+					placeholder: "Choose option",
+					size: "sm",
+					defaultValue: [filter?.operator ?? OPERATORS.contains],
+					children: /* @__PURE__ */ jsx(For, {
+						each: props.operatorCollection.items,
+						children: (item) => /* @__PURE__ */ jsx(Option, { item }, item.value)
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "Value",
+				required: true,
+				children: /* @__PURE__ */ jsx(Input, {
+					name: "value",
+					size: "sm",
+					defaultValue: filter?.value
+				})
+			}),
+			/* @__PURE__ */ jsx(SubmitButton, { pending: props.status.pending })
+		]
+	});
+}
+function SubmitButton(props) {
+	const { icons } = useCerberusContext();
+	const { arrowRight: Icon } = icons;
+	return /* @__PURE__ */ jsx(Box, {
+		alignSelf: "flex-end",
+		mb: "0.25rem",
+		children: /* @__PURE__ */ jsx(IconButton, {
+			ariaLabel: "Submit form",
+			disabled: props.pending,
+			type: "submit",
+			usage: "filled",
+			h: "2rem!",
+			w: "2rem!",
+			children: /* @__PURE__ */ jsx(Icon, {})
+		})
+	});
+}
+//#endregion
+export { DGPopover, DGPopoverAnchor, DGPopoverContent };

package/dist/components/sort-items.client.cjs

@@ -1,5 +1,6 @@
 "use client";
 "use client";
+const require_const = require("../const.cjs");
 let _cerberus_design_react = require("@cerberus-design/react");
 let styled_system_jsx = require("styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -17,7 +18,7 @@ function MatchSortItems(props) {
 }
 function UnsortItem() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
-		value: "unsort",
+		value: require_const.FEATURE_VALUES.unsort,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 			gap: "sm",
 			w: "full",
@@ -29,7 +30,7 @@ function SortAsc() {
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
 	const Icon = icons.sortAsc;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
-		value: "sort_asc",
+		value: require_const.FEATURE_VALUES.sortAsc,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 			gap: "sm",
 			w: "full",
@@ -41,7 +42,7 @@ function SortDesc() {
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
 	const Icon = icons.sortDesc;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
-		value: "sort_desc",
+		value: require_const.FEATURE_VALUES.sortDesc,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 			gap: "sm",
 			w: "full",

package/dist/components/sort-items.client.js

@@ -1,5 +1,6 @@
 "use client";
 "use client";
+import { FEATURE_VALUES } from "../const.js";
 import { MenuItem, useCerberusContext } from "@cerberus-design/react";
 import { HStack, Square } from "styled-system/jsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +18,7 @@ function MatchSortItems(props) {
 }
 function UnsortItem() {
 	return /* @__PURE__ */ jsx(MenuItem, {
-		value: "unsort",
+		value: FEATURE_VALUES.unsort,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			gap: "sm",
 			w: "full",
@@ -29,7 +30,7 @@ function SortAsc() {
 	const { icons } = useCerberusContext();
 	const Icon = icons.sortAsc;
 	return /* @__PURE__ */ jsx(MenuItem, {
-		value: "sort_asc",
+		value: FEATURE_VALUES.sortAsc,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			gap: "sm",
 			w: "full",
@@ -41,7 +42,7 @@ function SortDesc() {
 	const { icons } = useCerberusContext();
 	const Icon = icons.sortDesc;
 	return /* @__PURE__ */ jsx(MenuItem, {
-		value: "sort_desc",
+		value: FEATURE_VALUES.sortDesc,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			gap: "sm",
 			w: "full",

package/dist/components/viewport.client.cjs

@@ -0,0 +1,115 @@
+"use client";
+"use client";
+const require_const = require("../const.cjs");
+const require_context_client = require("../context.client.cjs");
+const require_popover_client = require("./popover.client.cjs");
+const require_virtualizer_client = require("../virtualizer.client.cjs");
+const require_grid_client = require("./grid.client.cjs");
+const require_overlays = require("./overlays.cjs");
+let _cerberus_design_react = require("@cerberus-design/react");
+let _cerberus_design_signals = require("@cerberus-design/signals");
+let react = require("react");
+let styled_system_jsx = require("styled-system/jsx");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/viewport.client.tsx
+var GridViewport = (0, react.memo)(function GridViewport(props) {
+	const viewportRef = (0, react.useRef)(null);
+	const store = require_context_client.useDataGridContext();
+	const columns = (0, _cerberus_design_signals.useRead)(store.columns);
+	const rowCount = (0, _cerberus_design_signals.useRead)(store.rowCount);
+	const staticRows = (0, _cerberus_design_signals.useRead)(store.rows);
+	const pending = (0, _cerberus_design_signals.useRead)(store.pending);
+	const shouldLock = (0, _cerberus_design_signals.createComputed)(() => rowCount <= 0);
+	const hasNonSkeleton = (0, react.useMemo)(() => {
+		const overlays = props.overlays;
+		if (!overlays) return false;
+		return overlays?.pending !== "skeleton";
+	}, [props.overlays]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Scrollable, {
+		"data-scope": require_const.SCOPE,
+		"data-part": require_const.PARTS.VIEWPORT,
+		"data-lock": pending && hasNonSkeleton || shouldLock(),
+		hideScrollbar: true,
+		h: "full",
+		minH: "0",
+		minW: "full",
+		pos: "relative",
+		w: "full",
+		css: { "&:is([data-lock=true])": { overflow: "hidden!" } },
+		ref: viewportRef,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
+				role: "grid",
+				"aria-rowcount": staticRows.length + 1,
+				"aria-colcount": columns.length,
+				h: "var(--row-height)",
+				pos: "sticky",
+				top: "0",
+				w: "var(--total-grid-width)",
+				zIndex: "sticky",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
+					"aria-rowindex": 1,
+					role: "rowgroup",
+					gap: "0",
+					h: "full",
+					pos: "relative",
+					w: "full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
+						each: columns,
+						children: (col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+							when: col.isVisible(),
+							children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridHeaderCell, { column: col })
+						}, col.id)
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+				when: rowCount > 0,
+				fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_overlays.NoContentOverlay, { custom: props.overlays?.noContent }),
+				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRows, { viewportRef })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+				when: pending,
+				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_overlays.PendingOverlay, { variant: props.overlays?.pending })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover_client.DGPopoverContent, { ref: props.rootRef })
+		]
+	});
+});
+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);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+		when: isServerPaginated,
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
+			pos: "relative",
+			w: "var(--total-grid-width)",
+			style: { height: `${totalHeight}px` },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
+				each: virtualRows,
+				children: (vRow) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridRow, {
+					row: vRow.data,
+					index: vRow.index,
+					offsetY: vRow.offsetY
+				}, vRow.index)
+			})
+		}),
+		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Stack, {
+			direction: "column",
+			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),
+				children: (row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridRow, {
+					row,
+					index
+				}, index)
+			})
+		})
+	});
+});
+//#endregion
+exports.GridViewport = GridViewport;

package/dist/components/viewport.client.d.cts

@@ -0,0 +1,8 @@
+import { RefObject, NamedExoticComponent } from 'react';
+import { OverlaySlots } from '../types';
+interface GridViewportProps {
+    rootRef: RefObject<HTMLDivElement | null>;
+    overlays?: OverlaySlots;
+}
+export declare const GridViewport: NamedExoticComponent<GridViewportProps>;
+export {};

package/dist/components/viewport.client.d.ts

@@ -0,0 +1,8 @@
+import { RefObject, NamedExoticComponent } from 'react';
+import { OverlaySlots } from '../types';
+interface GridViewportProps {
+    rootRef: RefObject<HTMLDivElement | null>;
+    overlays?: OverlaySlots;
+}
+export declare const GridViewport: NamedExoticComponent<GridViewportProps>;
+export {};