@cerberus-design/data-grid 0.25.3 → 1.0.0-rc.6

package/dist/column-helpers.cjs

@@ -1,24 +1,58 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
+"use client";
+//#region src/column-helpers.ts
+/**
+* A helper to format columns which provides a heavily typed interface for
+* creating column definitions used by the DataGrid component.
+*
+* @example
+* ```tsx
+* import { createColumnHelper } from '@cerberus/data-grid'
+*
+* const columnHelper = createColumnHelper<MyDataType>()
+*
+* const columns = [
+*   columnHelper.accessor('id', {
+*     header: 'ID',
+*     width: 100,
+*     cell: (props) => props.row.original.id,
+*   }),
+*   columnHelper.accessorFn(
+*     (row: User) => `${row.firstName} ${row.lastName}`,
+*     {
+*       id: 'id',
+*       header: 'Full Name',
+*       cell: (props) => <span className="custom-component">{props.value}</span>
+*     }
+*   ),
+*   columnHelper.display({
+*     id: 'actions',
+*     header: 'Actions',
+*     width: 150,
+*     cell: (props) => (
+*       <button onClick={() => handleDelete(props.row.original.id)}>
+*         Delete
+*       </button>
+*     ),
+*   }),
+* ]
+* ```
+*/
 function createColumnHelper() {
-  return {
-    accessor: (key, options) => ({
-      id: options.id ?? key,
-      accessor: (row) => row[key],
-      ...options
-    }),
-    accessorFn: (accessorFn, options) => ({
-      accessor: accessorFn,
-      ...options
-    }),
-    display: (options) => ({
-      accessor: () => void 0,
-      ...options
-    })
-  };
+	return {
+		accessor: (key, options) => ({
+			id: options.id ?? key,
+			accessor: (row) => row[key],
+			...options
+		}),
+		accessorFn: (accessorFn, options) => ({
+			accessor: accessorFn,
+			...options
+		}),
+		display: (options) => ({
+			accessor: () => void 0,
+			...options
+		})
+	};
 }
-
+//#endregion
 exports.createColumnHelper = createColumnHelper;

package/dist/column-helpers.js

@@ -1,20 +1,58 @@
-'use client';
+"use client";
+//#region src/column-helpers.ts
+/**
+* A helper to format columns which provides a heavily typed interface for
+* creating column definitions used by the DataGrid component.
+*
+* @example
+* ```tsx
+* import { createColumnHelper } from '@cerberus/data-grid'
+*
+* const columnHelper = createColumnHelper<MyDataType>()
+*
+* const columns = [
+*   columnHelper.accessor('id', {
+*     header: 'ID',
+*     width: 100,
+*     cell: (props) => props.row.original.id,
+*   }),
+*   columnHelper.accessorFn(
+*     (row: User) => `${row.firstName} ${row.lastName}`,
+*     {
+*       id: 'id',
+*       header: 'Full Name',
+*       cell: (props) => <span className="custom-component">{props.value}</span>
+*     }
+*   ),
+*   columnHelper.display({
+*     id: 'actions',
+*     header: 'Actions',
+*     width: 150,
+*     cell: (props) => (
+*       <button onClick={() => handleDelete(props.row.original.id)}>
+*         Delete
+*       </button>
+*     ),
+*   }),
+* ]
+* ```
+*/
 function createColumnHelper() {
-  return {
-    accessor: (key, options) => ({
-      id: options.id ?? key,
-      accessor: (row) => row[key],
-      ...options
-    }),
-    accessorFn: (accessorFn, options) => ({
-      accessor: accessorFn,
-      ...options
-    }),
-    display: (options) => ({
-      accessor: () => void 0,
-      ...options
-    })
-  };
+	return {
+		accessor: (key, options) => ({
+			id: options.id ?? key,
+			accessor: (row) => row[key],
+			...options
+		}),
+		accessorFn: (accessorFn, options) => ({
+			accessor: accessorFn,
+			...options
+		}),
+		display: (options) => ({
+			accessor: () => void 0,
+			...options
+		})
+	};
 }
-
+//#endregion
 export { createColumnHelper };

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

@@ -1,14 +1,15 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('@cerberus-design/react');
-const dataGrid_client = require('./data-grid.client.cjs');
-
+"use client";
+"use client";
+const require_data_grid_client = require("./data-grid.client.cjs");
+let _cerberus_design_react = require("@cerberus-design/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/cerby-data-grid.client.tsx
+/**
+* A Data Grid wrapped in the CerberusProvider in order to provide the necessary
+* context for the grid to function properly.
+*/
 function CerberusDataGrid(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.CerberusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(dataGrid_client.DataGrid, { ...props }) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.CerberusProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_data_grid_client.DataGrid, { ...props }) });
 }
-
+//#endregion
 exports.CerberusDataGrid = CerberusDataGrid;

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

@@ -1,10 +1,15 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { CerberusProvider } from '@cerberus-design/react';
-import { DataGrid } from './data-grid.client.js';
-
+"use client";
+"use client";
+import { DataGrid } from "./data-grid.client.js";
+import { CerberusProvider } from "@cerberus-design/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/cerby-data-grid.client.tsx
+/**
+* A Data Grid wrapped in the CerberusProvider in order to provide the necessary
+* context for the grid to function properly.
+*/
 function CerberusDataGrid(props) {
-  return /* @__PURE__ */ jsx(CerberusProvider, { children: /* @__PURE__ */ jsx(DataGrid, { ...props }) });
+	return /* @__PURE__ */ jsx(CerberusProvider, { children: /* @__PURE__ */ jsx(DataGrid, { ...props }) });
 }
-
+//#endregion
 export { CerberusDataGrid };

package/dist/components/count-menu.client.cjs

@@ -1,52 +1,49 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const react = require('@cerberus-design/react');
-const signals = require('@cerberus-design/signals');
-const jsx = require('styled-system/jsx');
-const context_client = require('../context.client.cjs');
-
+"use client";
+"use client";
+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");
+//#region src/components/count-menu.client.tsx
 function CountMenu(props) {
-  const state = context_client.useDataGridContext();
-  const { icons } = react.useCerberusContext();
-  const pageSize = signals.useRead(state.pageSize);
-  const range = signals.useRead(state.pageRange);
-  const Icon = icons.caretDown;
-  const collection = react.createSelectCollection(
-    range.map((size) => {
-      const sizeStr = String(size);
-      return { value: sizeStr, label: sizeStr };
-    })
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Field, { label: "Select a page size", hideLabel: true, flexDirection: "row", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    react.SelectParts.Root,
-    {
-      ...props,
-      collection,
-      defaultValue: [String(pageSize)],
-      size: "sm",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.SelectParts.Control, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          react.SelectParts.Trigger,
-          {
-            border: "none",
-            minW: "initial",
-            gap: "xs",
-            ps: "0",
-            pe: "0",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.SelectParts.ValueText, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(jsx.HStack, { children: /* @__PURE__ */ jsxRuntime.jsx(react.SelectParts.Indicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.SelectParts.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.SelectParts.Content, { minW: "7rem", children: /* @__PURE__ */ jsxRuntime.jsx(react.For, { each: collection.items, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(react.Option, { item }, item.value) }) }) })
-      ]
-    }
-  ) }) });
+	const state = require_context_client.useDataGridContext();
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const pageSize = (0, _cerberus_design_signals.useRead)(state.pageSize);
+	const range = (0, _cerberus_design_signals.useRead)(state.pageRange);
+	const Icon = icons.caretDown;
+	const collection = (0, _cerberus_design_react.createSelectCollection)(range.map((size) => {
+		const sizeStr = String(size);
+		return {
+			value: sizeStr,
+			label: sizeStr
+		};
+	}));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Field, {
+		label: "Select a page size",
+		hideLabel: true,
+		flexDirection: "row",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.SelectParts.Root, {
+			...props,
+			collection,
+			defaultValue: [String(pageSize)],
+			size: "sm",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.SelectParts.Control, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.SelectParts.Trigger, {
+				border: "none",
+				minW: "initial",
+				gap: "xs",
+				ps: "0",
+				pe: "0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.SelectParts.ValueText, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.SelectParts.Indicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}) }) })]
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.SelectParts.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.SelectParts.Content, {
+				minW: "7rem",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
+					each: collection.items,
+					children: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Option, { item }, item.value)
+				})
+			}) })]
+		})
+	}) });
 }
-
+//#endregion
 exports.CountMenu = CountMenu;

package/dist/components/count-menu.client.js

@@ -1,48 +1,49 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCerberusContext, createSelectCollection, Field, SelectParts, For, Option } from '@cerberus-design/react';
-import { useRead } from '@cerberus-design/signals';
-import { Box, HStack } from 'styled-system/jsx';
-import { useDataGridContext } from '../context.client.js';
-
+"use client";
+"use client";
+import { useDataGridContext } from "../context.client.js";
+import { Field, For, Option, SelectParts, createSelectCollection, useCerberusContext } from "@cerberus-design/react";
+import { useRead } from "@cerberus-design/signals";
+import { Box, HStack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/count-menu.client.tsx
 function CountMenu(props) {
-  const state = useDataGridContext();
-  const { icons } = useCerberusContext();
-  const pageSize = useRead(state.pageSize);
-  const range = useRead(state.pageRange);
-  const Icon = icons.caretDown;
-  const collection = createSelectCollection(
-    range.map((size) => {
-      const sizeStr = String(size);
-      return { value: sizeStr, label: sizeStr };
-    })
-  );
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Field, { label: "Select a page size", hideLabel: true, flexDirection: "row", children: /* @__PURE__ */ jsxs(
-    SelectParts.Root,
-    {
-      ...props,
-      collection,
-      defaultValue: [String(pageSize)],
-      size: "sm",
-      children: [
-        /* @__PURE__ */ jsx(SelectParts.Control, { children: /* @__PURE__ */ jsxs(
-          SelectParts.Trigger,
-          {
-            border: "none",
-            minW: "initial",
-            gap: "xs",
-            ps: "0",
-            pe: "0",
-            children: [
-              /* @__PURE__ */ jsx(SelectParts.ValueText, {}),
-              /* @__PURE__ */ jsx(HStack, { children: /* @__PURE__ */ jsx(SelectParts.Indicator, { children: /* @__PURE__ */ jsx(Icon, {}) }) })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(SelectParts.Positioner, { children: /* @__PURE__ */ jsx(SelectParts.Content, { minW: "7rem", children: /* @__PURE__ */ jsx(For, { each: collection.items, children: (item) => /* @__PURE__ */ jsx(Option, { item }, item.value) }) }) })
-      ]
-    }
-  ) }) });
+	const state = useDataGridContext();
+	const { icons } = useCerberusContext();
+	const pageSize = useRead(state.pageSize);
+	const range = useRead(state.pageRange);
+	const Icon = icons.caretDown;
+	const collection = createSelectCollection(range.map((size) => {
+		const sizeStr = String(size);
+		return {
+			value: sizeStr,
+			label: sizeStr
+		};
+	}));
+	return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Field, {
+		label: "Select a page size",
+		hideLabel: true,
+		flexDirection: "row",
+		children: /* @__PURE__ */ jsxs(SelectParts.Root, {
+			...props,
+			collection,
+			defaultValue: [String(pageSize)],
+			size: "sm",
+			children: [/* @__PURE__ */ jsx(SelectParts.Control, { children: /* @__PURE__ */ jsxs(SelectParts.Trigger, {
+				border: "none",
+				minW: "initial",
+				gap: "xs",
+				ps: "0",
+				pe: "0",
+				children: [/* @__PURE__ */ jsx(SelectParts.ValueText, {}), /* @__PURE__ */ jsx(HStack, { children: /* @__PURE__ */ jsx(SelectParts.Indicator, { children: /* @__PURE__ */ jsx(Icon, {}) }) })]
+			}) }), /* @__PURE__ */ jsx(SelectParts.Positioner, { children: /* @__PURE__ */ jsx(SelectParts.Content, {
+				minW: "7rem",
+				children: /* @__PURE__ */ jsx(For, {
+					each: collection.items,
+					children: (item) => /* @__PURE__ */ jsx(Option, { item }, item.value)
+				})
+			}) })]
+		})
+	}) });
 }
-
+//#endregion
 export { CountMenu };

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

@@ -1,85 +1,92 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@cerberus-design/react');
-const signals = require('@cerberus-design/signals');
-const react = require('react');
-const jsx = require('styled-system/jsx');
-const _const = require('../const.cjs');
-const context_client = require('../context.client.cjs');
-const store = require('../store.cjs');
-const grid_client = require('./grid.client.cjs');
-const pagination_client = require('./pagination.client.cjs');
-
+"use client";
+"use client";
+const require_const = require("../const.cjs");
+const require_context_client = require("../context.client.cjs");
+const require_store = require("../store.cjs");
+const require_grid_client = require("./grid.client.cjs");
+const require_pagination_client = require("./pagination.client.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/data-grid.client.tsx
 function DataGridEl(props) {
-  const { data } = props;
-  const store$1 = react.useMemo(
-    () => store.createGridStore({
-      data,
-      columns: props.columns,
-      initialState: props.initialState,
-      rowSize: props.rowSize,
-      onPageChange: props.onPageChange
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const [ready, setReady] = signals.useSignal(false);
-  const rootRef = react.useRef(null);
-  react.useEffect(() => {
-    store$1.updateData(data);
-  }, [data, store$1]);
-  react.useEffect(() => {
-    const el = rootRef.current;
-    if (!el) return;
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        store$1.setContainerWidth(entry.contentRect.width);
-      }
-    });
-    observer.observe(el);
-    const cleanupSignalEffect = signals.createEffect(() => {
-      Object.entries(store$1.rootCssVars()).forEach(([key, val]) => {
-        el.style.setProperty(key, val);
-      });
-    });
-    setReady(true);
-    return () => {
-      observer.disconnect();
-      cleanupSignalEffect();
-    };
-  }, [store$1, setReady]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(context_client.DataGridProvider, { createStore: () => store$1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: props.toolbar, children: () => /* @__PURE__ */ jsxRuntime.jsx(jsx.HStack, { "data-scope": _const.SCOPE, "data-part": _const.PARTS.TOOLBAR, w: "full", children: props.toolbar }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      jsx.Stack,
-      {
-        "data-scope": _const.SCOPE,
-        "data-part": _const.PARTS.ROOT,
-        dir: "columns",
-        maxH: "inherit",
-        minH: "inherit",
-        gap: "0",
-        h: "full",
-        bgColor: "page.surface.100/55",
-        border: "1px solid",
-        borderColor: "page.border.initial",
-        rounded: "lg",
-        overflow: "hidden",
-        w: "full",
-        ref: rootRef,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: ready, children: () => /* @__PURE__ */ jsxRuntime.jsx(grid_client.GridViewport, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: props.footer, children: () => /* @__PURE__ */ jsxRuntime.jsx(jsx.HStack, { "data-scope": _const.SCOPE, "data-part": _const.PARTS.FOOTER, w: "full", children: props.footer }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(pagination_client.GridPagination, {})
-        ]
-      }
-    )
-  ] });
+	const { data } = props;
+	const store = (0, react.useMemo)(() => require_store.createGridStore({
+		data,
+		columns: props.columns,
+		initialState: props.initialState,
+		rowSize: props.rowSize,
+		onPageChange: props.onPageChange
+	}), []);
+	const [ready, setReady] = (0, _cerberus_design_signals.useSignal)(false);
+	const rootRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		store.updateData(data);
+	}, [data, store]);
+	(0, react.useEffect)(() => {
+		const el = rootRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) store.setContainerWidth(entry.contentRect.width);
+		});
+		observer.observe(el);
+		const cleanupSignalEffect = (0, _cerberus_design_signals.createEffect)(() => {
+			Object.entries(store.rootCssVars()).forEach(([key, val]) => {
+				el.style.setProperty(key, val);
+			});
+		});
+		setReady(true);
+		return () => {
+			observer.disconnect();
+			cleanupSignalEffect();
+		};
+	}, [store, setReady]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_context_client.DataGridProvider, {
+		createStore: () => store,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+			when: props.toolbar,
+			children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
+				"data-scope": require_const.SCOPE,
+				"data-part": require_const.PARTS.TOOLBAR,
+				w: "full",
+				children: props.toolbar
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Stack, {
+			"data-scope": require_const.SCOPE,
+			"data-part": require_const.PARTS.ROOT,
+			dir: "columns",
+			maxH: "inherit",
+			minH: "inherit",
+			gap: "0",
+			h: "full",
+			bgColor: "page.surface.100/55",
+			border: "1px solid",
+			borderColor: "page.border.initial",
+			rounded: "lg",
+			overflow: "hidden",
+			w: "full",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+					when: ready,
+					children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridViewport, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+					when: props.footer,
+					children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
+						"data-scope": require_const.SCOPE,
+						"data-part": require_const.PARTS.FOOTER,
+						w: "full",
+						children: props.footer
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination_client.GridPagination, {})
+			]
+		})]
+	});
 }
-const DataGrid = react.memo(DataGridEl);
-
+var DataGrid = (0, react.memo)(DataGridEl);
+//#endregion
 exports.DataGrid = DataGrid;