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

package/dist/components/grid.client.cjs

@@ -1,319 +1,290 @@
-'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 hooks_client = require('../hooks.client.cjs');
-const virtualizer_client = require('../virtualizer.client.cjs');
-const features_client = require('./features.client.cjs');
-
+"use client";
+"use client";
+const require_const = require("../const.cjs");
+const require_context_client = require("../context.client.cjs");
+const require_hooks_client = require("../hooks.client.cjs");
+const require_virtualizer_client = require("../virtualizer.client.cjs");
+const require_features_client = require("./features.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/grid.client.tsx
 function GridViewport() {
-  const viewportRef = react.useRef(null);
-  const store = context_client.useDataGridContext();
-  const { virtualRows, totalHeight } = virtualizer_client.useVirtualizer(store, viewportRef);
-  const columns = signals.useRead(store.columns);
-  const isServerPaginated = signals.useRead(store.isServerPaginated);
-  const staticRows = signals.useRead(store.rows);
-  const currentPageRange = signals.useRead(store.currentPageRange);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    jsx.Scrollable,
-    {
-      hideScrollbar: true,
-      "data-scope": _const.SCOPE,
-      "data-part": _const.PARTS.VIEWPORT,
-      h: "full",
-      minH: "0",
-      minW: "full",
-      pos: "relative",
-      w: "full",
-      ref: viewportRef,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          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__ */ jsxRuntime.jsx(
-              jsx.HStack,
-              {
-                "aria-rowIndex": "1",
-                role: "rowgroup",
-                gap: "0",
-                h: "full",
-                pos: "relative",
-                w: "full",
-                children: /* @__PURE__ */ jsxRuntime.jsx(react$1.For, { each: columns, children: (col) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: col.isVisible(), children: () => /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { column: col }) }, col.id) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.Show,
-          {
-            when: isServerPaginated,
-            fallback: /* @__PURE__ */ jsxRuntime.jsx(
-              jsx.Box,
-              {
-                pos: "relative",
-                w: "var(--total-grid-width)",
-                style: {
-                  height: `${totalHeight}px`
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(react$1.For, { each: virtualRows, children: (vRow) => /* @__PURE__ */ jsxRuntime.jsx(
-                  GridRow,
-                  {
-                    row: vRow.data,
-                    index: vRow.index,
-                    offsetY: vRow.offsetY
-                  },
-                  vRow.index
-                ) })
-              }
-            ),
-            children: () => /* @__PURE__ */ jsxRuntime.jsx(jsx.Stack, { direction: "column", gap: "0", w: "var(--total-grid-width)", children: /* @__PURE__ */ jsxRuntime.jsx(
-              react$1.For,
-              {
-                each: staticRows.slice(
-                  currentPageRange.start,
-                  currentPageRange.end
-                ),
-                children: (row, index) => /* @__PURE__ */ jsxRuntime.jsx(GridRow, { row, index }, index)
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  );
+	const viewportRef = (0, react.useRef)(null);
+	const store = require_context_client.useDataGridContext();
+	const { virtualRows, totalHeight } = require_virtualizer_client.useVirtualizer(store, viewportRef);
+	const columns = (0, _cerberus_design_signals.useRead)(store.columns);
+	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.jsxs)(styled_system_jsx.Scrollable, {
+		hideScrollbar: true,
+		"data-scope": require_const.SCOPE,
+		"data-part": require_const.PARTS.VIEWPORT,
+		h: "full",
+		minH: "0",
+		minW: "full",
+		pos: "relative",
+		w: "full",
+		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)(GridHeaderCell, { column: col })
+					}, col.id)
+				})
+			})
+		}), /* @__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)(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)(GridRow, {
+						row,
+						index
+					}, index)
+				})
+			})
+		})]
+	});
 }
-const GridHeaderCell = react.memo(function GridHeaderCell2(props) {
-  const { column } = props;
-  const store = context_client.useDataGridContext();
-  const { icons } = react$1.useCerberusContext();
-  const pinnedVal = signals.useRead(column.pinned);
-  const sortingVal = signals.useRead(store.sorting);
-  const pinnedState = hooks_client.usePinnedState(pinnedVal);
-  const pinnedAttr = hooks_client.usePinnedAttribute(pinnedVal);
-  const style = hooks_client.useColumnStyles(column, pinnedVal);
-  const isSortedDesc = react.useMemo(() => {
-    const result = sortingVal.find((item) => item.id === column.id);
-    if (result) return result.desc;
-    return false;
-  }, [sortingVal, column.id]);
-  const SortAscIcon = icons.sortAsc;
-  const SortDescIcon = icons.sortDesc;
-  function handleToggleSorting(e) {
-    store.toggleSort(column.id, e.shiftKey);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    jsx.HStack,
-    {
-      role: "columnheader",
-      "data-scope": _const.SCOPE,
-      "data-part": _const.PARTS.HEAD_CELL,
-      "data-state": pinnedState,
-      "data-col": column.id,
-      ...pinnedAttr,
-      bgColor: "page.bg.initial",
-      borderBottom: "1px solid",
-      borderColor: "page.border.200",
-      h: "full",
-      justify: "space-between",
-      pos: "relative",
-      px: "md",
-      userSelect: "none",
-      textAlign: "left",
-      textStyle: "label-md",
-      verticalAlign: "middle",
-      w: "full",
-      zIndex: "10",
-      _first: {
-        borderTopLeftRadius: "md"
-      },
-      _last: {
-        borderTopRightRadius: "md"
-      },
-      _pinned: {
-        pos: "sticky",
-        zIndex: 20
-      },
-      _leftPinned: {
-        borderRightColor: "page.border.200",
-        borderRight: "1px solid"
-      },
-      _rightPinned: {
-        borderLeftColor: "page.border.200",
-        borderLeft: "1px solid"
-      },
-      className: "group",
-      style,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          jsx.HStack,
-          {
-            gap: "sm",
-            _groupHover: {
-              "& :is(button)": {
-                opacity: "1"
-              }
-            },
-            children: [
-              typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header,
-              /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: column.sortable, children: /* @__PURE__ */ jsxRuntime.jsx(
-                react$1.Tooltip,
-                {
-                  content: isSortedDesc ? "Sort Ascending" : "Sort Decending",
-                  openDelay: 800,
-                  asChild: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    react$1.IconButton,
-                    {
-                      ariaLabel: "Toggle sorting",
-                      size: "sm",
-                      opacity: {
-                        base: 1,
-                        md: 0
-                      },
-                      transitionProperty: "opacity",
-                      transitionDuration: "fast",
-                      onClick: handleToggleSorting,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: isSortedDesc, fallback: /* @__PURE__ */ jsxRuntime.jsx(SortAscIcon, {}), children: /* @__PURE__ */ jsxRuntime.jsx(SortDescIcon, {}) })
-                    }
-                  )
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(features_client.HeaderCellOptions, { ...column }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: pinnedState === "pinned", children: () => /* @__PURE__ */ jsxRuntime.jsx(ShadowFiller, { style, ...pinnedAttr }) })
-      ]
-    }
-  );
+var GridHeaderCell = (0, react.memo)(function GridHeaderCell(props) {
+	const { column } = props;
+	const store = require_context_client.useDataGridContext();
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const pinnedVal = (0, _cerberus_design_signals.useRead)(column.pinned);
+	const sortingVal = (0, _cerberus_design_signals.useRead)(store.sorting);
+	const pinnedState = require_hooks_client.usePinnedState(pinnedVal);
+	const pinnedAttr = require_hooks_client.usePinnedAttribute(pinnedVal);
+	const style = require_hooks_client.useColumnStyles(column, pinnedVal);
+	const isSortedDesc = (0, react.useMemo)(() => {
+		const result = sortingVal.find((item) => item.id === column.id);
+		if (result) return result.desc;
+		return false;
+	}, [sortingVal, column.id]);
+	const SortAscIcon = icons.sortAsc;
+	const SortDescIcon = icons.sortDesc;
+	function handleToggleSorting(e) {
+		store.toggleSort(column.id, e.shiftKey);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+		role: "columnheader",
+		"data-scope": require_const.SCOPE,
+		"data-part": require_const.PARTS.HEAD_CELL,
+		"data-state": pinnedState,
+		"data-col": column.id,
+		...pinnedAttr,
+		bgColor: "page.bg.initial",
+		borderBottom: "1px solid",
+		borderColor: "page.border.200",
+		h: "full",
+		justify: "space-between",
+		pos: "relative",
+		px: "md",
+		userSelect: "none",
+		textAlign: "left",
+		textStyle: "label-md",
+		verticalAlign: "middle",
+		w: "full",
+		zIndex: "10",
+		_first: { borderTopLeftRadius: "md" },
+		_last: { borderTopRightRadius: "md" },
+		_pinned: {
+			pos: "sticky",
+			zIndex: 20
+		},
+		_leftPinned: {
+			borderRightColor: "page.border.200",
+			borderRight: "1px solid"
+		},
+		_rightPinned: {
+			borderLeftColor: "page.border.200",
+			borderLeft: "1px solid"
+		},
+		className: "group",
+		style,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+				gap: "sm",
+				_groupHover: { "& :is(button)": { opacity: "1" } },
+				children: [typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+					when: column.sortable,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Tooltip, {
+						content: isSortedDesc ? "Sort Ascending" : "Sort Decending",
+						openDelay: 800,
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButton, {
+							ariaLabel: "Toggle sorting",
+							size: "sm",
+							opacity: {
+								base: 1,
+								md: 0
+							},
+							transitionProperty: "opacity",
+							transitionDuration: "fast",
+							onClick: handleToggleSorting,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+								when: isSortedDesc,
+								fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortAscIcon, {}),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDescIcon, {})
+							})
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_features_client.HeaderCellOptions, { ...column }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+				when: pinnedState === "pinned",
+				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowFiller, {
+					style,
+					...pinnedAttr
+				})
+			})
+		]
+	});
 });
-const GridCell = react.memo(function GridCell2(props) {
-  const { column, row } = props;
-  const value = column.getValue(row);
-  const pinnedVal = signals.useRead(column.pinned);
-  const pinnedState = hooks_client.usePinnedState(pinnedVal);
-  const pinnedAttr = hooks_client.usePinnedAttribute(pinnedVal);
-  const style = hooks_client.useColumnStyles(column, pinnedVal);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    jsx.HStack,
-    {
-      role: "cell",
-      "data-scope": _const.SCOPE,
-      "data-part": _const.PARTS.CELL,
-      "data-state": pinnedState,
-      ...pinnedAttr,
-      bgColor: "inherit",
-      borderColor: "page.border.200",
-      h: "full",
-      pos: "relative",
-      px: "md",
-      userSelect: "none",
-      verticalAlign: "middle",
-      zIndex: "base",
-      _pinned: {
-        pos: "sticky",
-        zIndex: 20
-      },
-      _leftPinned: {
-        borderRightColor: "page.border.200",
-        borderRight: "1px solid"
-      },
-      _rightPinned: {
-        borderLeftColor: "page.border.200",
-        borderLeft: "1px solid"
-      },
-      style,
-      children: [
-        column.original.cell ? column.original.cell({ row, value }) : value,
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: pinnedState === "pinned", children: () => /* @__PURE__ */ jsxRuntime.jsx(ShadowFiller, { style, ...pinnedAttr }) })
-      ]
-    }
-  );
+var GridCell = (0, react.memo)(function GridCell(props) {
+	const { column, row } = props;
+	const value = column.getValue(row);
+	const pinnedVal = (0, _cerberus_design_signals.useRead)(column.pinned);
+	const pinnedState = require_hooks_client.usePinnedState(pinnedVal);
+	const pinnedAttr = require_hooks_client.usePinnedAttribute(pinnedVal);
+	const style = require_hooks_client.useColumnStyles(column, pinnedVal);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+		role: "cell",
+		"data-scope": require_const.SCOPE,
+		"data-part": require_const.PARTS.CELL,
+		"data-state": pinnedState,
+		...pinnedAttr,
+		bgColor: "inherit",
+		borderColor: "page.border.200",
+		h: "full",
+		pos: "relative",
+		px: "md",
+		userSelect: "none",
+		verticalAlign: "middle",
+		zIndex: "base",
+		_pinned: {
+			pos: "sticky",
+			zIndex: 20
+		},
+		_leftPinned: {
+			borderRightColor: "page.border.200",
+			borderRight: "1px solid"
+		},
+		_rightPinned: {
+			borderLeftColor: "page.border.200",
+			borderLeft: "1px solid"
+		},
+		style,
+		children: [column.original.cell ? column.original.cell({
+			row,
+			value
+		}) : value, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+			when: pinnedState === "pinned",
+			children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowFiller, {
+				style,
+				...pinnedAttr
+			})
+		})]
+	});
 });
-const GridRow = react.memo(function GridRow2(props) {
-  const store = context_client.useDataGridContext();
-  const columns = signals.useRead(store.columns);
-  return /* @__PURE__ */ jsxRuntime.jsx(GridRowContainer, { offsetY: props.offsetY, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.For, { each: columns, children: (col) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Show, { when: col.isVisible(), children: () => /* @__PURE__ */ jsxRuntime.jsx(GridCell, { row: props.row, column: col }) }, col.id) }) });
+var GridRow = (0, react.memo)(function GridRow(props) {
+	const columns = (0, _cerberus_design_signals.useRead)(require_context_client.useDataGridContext().columns);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridRowContainer, {
+		offsetY: props.offsetY,
+		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)(GridCell, {
+					row: props.row,
+					column: col
+				})
+			}, col.id)
+		})
+	});
 });
 function GridRowContainer(props) {
-  const isVirtualized = props.offsetY !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    jsx.HStack,
-    {
-      role: "row",
-      "data-scope": _const.SCOPE,
-      "data-part": _const.PARTS.ROW,
-      "data-render": isVirtualized ? "virtualized" : "static",
-      bgColor: "page.surface.100",
-      gap: "0",
-      h: "var(--row-height)",
-      w: "full",
-      _even: {
-        bgColor: "page.surface.initial"
-      },
-      _hover: {
-        bgColor: "page.surface.200"
-      },
-      css: {
-        "&:is([data-render=virtualized])": {
-          pos: "absolute",
-          left: 0
-        }
-      },
-      style: {
-        transform: isVirtualized ? `translateY(${props.offsetY}px)` : void 0
-      },
-      children: props.children
-    }
-  );
+	const isVirtualized = props.offsetY !== void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
+		role: "row",
+		"data-scope": require_const.SCOPE,
+		"data-part": require_const.PARTS.ROW,
+		"data-render": isVirtualized ? "virtualized" : "static",
+		bgColor: "page.surface.100",
+		gap: "0",
+		h: "var(--row-height)",
+		w: "full",
+		_even: { bgColor: "page.surface.initial" },
+		_hover: { bgColor: "page.surface.200" },
+		css: { "&:is([data-render=virtualized])": {
+			pos: "absolute",
+			left: 0
+		} },
+		style: { transform: isVirtualized ? `translateY(${props.offsetY}px)` : void 0 },
+		children: props.children
+	});
 }
 function ShadowFiller(props) {
-  const { style, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    jsx.Box,
-    {
-      bottom: "0",
-      h: "full",
-      pos: "absolute",
-      w: "0.75rem",
-      zIndex: "inherit",
-      _leftPinned: {
-        bgGradient: "to-r",
-        gradientFrom: "black/10",
-        gradientTo: "transparent"
-      },
-      _rightPinned: {
-        bgGradient: "to-l",
-        gradientFrom: "black/10",
-        gradientTo: "transparent"
-      },
-      style: {
-        left: style.left ? style.width : void 0,
-        right: style.right ? style.width : void 0
-      },
-      ...rest
-    }
-  );
+	const { style, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
+		bottom: "0",
+		h: "full",
+		pos: "absolute",
+		w: "0.75rem",
+		zIndex: "inherit",
+		_leftPinned: {
+			bgGradient: "to-r",
+			gradientFrom: "black/10",
+			gradientTo: "transparent"
+		},
+		_rightPinned: {
+			bgGradient: "to-l",
+			gradientFrom: "black/10",
+			gradientTo: "transparent"
+		},
+		style: {
+			left: style.left ? style.width : void 0,
+			right: style.right ? style.width : void 0
+		},
+		...rest
+	});
 }
-
-exports.GridCell = GridCell;
-exports.GridHeaderCell = GridHeaderCell;
-exports.GridRow = GridRow;
+//#endregion
 exports.GridViewport = GridViewport;