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

package/dist/components/grid.client.js

@@ -1,312 +1,290 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { For, Show, useCerberusContext, Tooltip, IconButton } from '@cerberus-design/react';
-import { useRead } from '@cerberus-design/signals';
-import { useRef, memo, useMemo } from 'react';
-import { Scrollable, Box, HStack, Stack } from 'styled-system/jsx';
-import { PARTS, SCOPE } from '../const.js';
-import { useDataGridContext } from '../context.client.js';
-import { useColumnStyles, usePinnedAttribute, usePinnedState } from '../hooks.client.js';
-import { useVirtualizer } from '../virtualizer.client.js';
-import { HeaderCellOptions } from './features.client.js';
-
+"use client";
+"use client";
+import { PARTS, SCOPE } from "../const.js";
+import { useDataGridContext } from "../context.client.js";
+import { useColumnStyles, usePinnedAttribute, usePinnedState } from "../hooks.client.js";
+import { useVirtualizer } from "../virtualizer.client.js";
+import { HeaderCellOptions } from "./features.client.js";
+import { For, IconButton, Show, Tooltip, useCerberusContext } from "@cerberus-design/react";
+import { useRead } from "@cerberus-design/signals";
+import { memo, useMemo, useRef } from "react";
+import { Box, HStack, Scrollable, Stack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/grid.client.tsx
 function GridViewport() {
-  const viewportRef = useRef(null);
-  const store = useDataGridContext();
-  const { virtualRows, totalHeight } = useVirtualizer(store, viewportRef);
-  const columns = useRead(store.columns);
-  const isServerPaginated = useRead(store.isServerPaginated);
-  const staticRows = useRead(store.rows);
-  const currentPageRange = useRead(store.currentPageRange);
-  return /* @__PURE__ */ jsxs(
-    Scrollable,
-    {
-      hideScrollbar: true,
-      "data-scope": SCOPE,
-      "data-part": PARTS.VIEWPORT,
-      h: "full",
-      minH: "0",
-      minW: "full",
-      pos: "relative",
-      w: "full",
-      ref: viewportRef,
-      children: [
-        /* @__PURE__ */ 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__ */ jsx(
-              HStack,
-              {
-                "aria-rowIndex": "1",
-                role: "rowgroup",
-                gap: "0",
-                h: "full",
-                pos: "relative",
-                w: "full",
-                children: /* @__PURE__ */ jsx(For, { each: columns, children: (col) => /* @__PURE__ */ jsx(Show, { when: col.isVisible(), children: () => /* @__PURE__ */ jsx(GridHeaderCell, { column: col }) }, col.id) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Show,
-          {
-            when: isServerPaginated,
-            fallback: /* @__PURE__ */ jsx(
-              Box,
-              {
-                pos: "relative",
-                w: "var(--total-grid-width)",
-                style: {
-                  height: `${totalHeight}px`
-                },
-                children: /* @__PURE__ */ jsx(For, { each: virtualRows, children: (vRow) => /* @__PURE__ */ jsx(
-                  GridRow,
-                  {
-                    row: vRow.data,
-                    index: vRow.index,
-                    offsetY: vRow.offsetY
-                  },
-                  vRow.index
-                ) })
-              }
-            ),
-            children: () => /* @__PURE__ */ jsx(Stack, { direction: "column", gap: "0", w: "var(--total-grid-width)", children: /* @__PURE__ */ jsx(
-              For,
-              {
-                each: staticRows.slice(
-                  currentPageRange.start,
-                  currentPageRange.end
-                ),
-                children: (row, index) => /* @__PURE__ */ jsx(GridRow, { row, index }, index)
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  );
+	const viewportRef = useRef(null);
+	const store = useDataGridContext();
+	const { virtualRows, totalHeight } = useVirtualizer(store, viewportRef);
+	const columns = useRead(store.columns);
+	const isServerPaginated = useRead(store.isServerPaginated);
+	const staticRows = useRead(store.rows);
+	const currentPageRange = useRead(store.currentPageRange);
+	return /* @__PURE__ */ jsxs(Scrollable, {
+		hideScrollbar: true,
+		"data-scope": SCOPE,
+		"data-part": PARTS.VIEWPORT,
+		h: "full",
+		minH: "0",
+		minW: "full",
+		pos: "relative",
+		w: "full",
+		ref: viewportRef,
+		children: [/* @__PURE__ */ 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__ */ jsx(HStack, {
+				"aria-rowindex": 1,
+				role: "rowgroup",
+				gap: "0",
+				h: "full",
+				pos: "relative",
+				w: "full",
+				children: /* @__PURE__ */ jsx(For, {
+					each: columns,
+					children: (col) => /* @__PURE__ */ jsx(Show, {
+						when: col.isVisible(),
+						children: () => /* @__PURE__ */ jsx(GridHeaderCell, { column: col })
+					}, col.id)
+				})
+			})
+		}), /* @__PURE__ */ jsx(Show, {
+			when: isServerPaginated,
+			fallback: /* @__PURE__ */ jsx(Box, {
+				pos: "relative",
+				w: "var(--total-grid-width)",
+				style: { height: `${totalHeight}px` },
+				children: /* @__PURE__ */ jsx(For, {
+					each: virtualRows,
+					children: (vRow) => /* @__PURE__ */ jsx(GridRow, {
+						row: vRow.data,
+						index: vRow.index,
+						offsetY: vRow.offsetY
+					}, vRow.index)
+				})
+			}),
+			children: () => /* @__PURE__ */ jsx(Stack, {
+				direction: "column",
+				gap: "0",
+				w: "var(--total-grid-width)",
+				children: /* @__PURE__ */ jsx(For, {
+					each: staticRows.slice(currentPageRange.start, currentPageRange.end),
+					children: (row, index) => /* @__PURE__ */ jsx(GridRow, {
+						row,
+						index
+					}, index)
+				})
+			})
+		})]
+	});
 }
-const GridHeaderCell = memo(function GridHeaderCell2(props) {
-  const { column } = props;
-  const store = useDataGridContext();
-  const { icons } = useCerberusContext();
-  const pinnedVal = useRead(column.pinned);
-  const sortingVal = useRead(store.sorting);
-  const pinnedState = usePinnedState(pinnedVal);
-  const pinnedAttr = usePinnedAttribute(pinnedVal);
-  const style = useColumnStyles(column, pinnedVal);
-  const isSortedDesc = 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__ */ jsxs(
-    HStack,
-    {
-      role: "columnheader",
-      "data-scope": SCOPE,
-      "data-part": 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__ */ jsxs(
-          HStack,
-          {
-            gap: "sm",
-            _groupHover: {
-              "& :is(button)": {
-                opacity: "1"
-              }
-            },
-            children: [
-              typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header,
-              /* @__PURE__ */ jsx(Show, { when: column.sortable, children: /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  content: isSortedDesc ? "Sort Ascending" : "Sort Decending",
-                  openDelay: 800,
-                  asChild: true,
-                  children: /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      ariaLabel: "Toggle sorting",
-                      size: "sm",
-                      opacity: {
-                        base: 1,
-                        md: 0
-                      },
-                      transitionProperty: "opacity",
-                      transitionDuration: "fast",
-                      onClick: handleToggleSorting,
-                      children: /* @__PURE__ */ jsx(Show, { when: isSortedDesc, fallback: /* @__PURE__ */ jsx(SortAscIcon, {}), children: /* @__PURE__ */ jsx(SortDescIcon, {}) })
-                    }
-                  )
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(HeaderCellOptions, { ...column }),
-        /* @__PURE__ */ jsx(Show, { when: pinnedState === "pinned", children: () => /* @__PURE__ */ jsx(ShadowFiller, { style, ...pinnedAttr }) })
-      ]
-    }
-  );
+var GridHeaderCell = memo(function GridHeaderCell(props) {
+	const { column } = props;
+	const store = useDataGridContext();
+	const { icons } = useCerberusContext();
+	const pinnedVal = useRead(column.pinned);
+	const sortingVal = useRead(store.sorting);
+	const pinnedState = usePinnedState(pinnedVal);
+	const pinnedAttr = usePinnedAttribute(pinnedVal);
+	const style = useColumnStyles(column, pinnedVal);
+	const isSortedDesc = 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__ */ jsxs(HStack, {
+		role: "columnheader",
+		"data-scope": SCOPE,
+		"data-part": 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__ */ jsxs(HStack, {
+				gap: "sm",
+				_groupHover: { "& :is(button)": { opacity: "1" } },
+				children: [typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header, /* @__PURE__ */ jsx(Show, {
+					when: column.sortable,
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						content: isSortedDesc ? "Sort Ascending" : "Sort Decending",
+						openDelay: 800,
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							ariaLabel: "Toggle sorting",
+							size: "sm",
+							opacity: {
+								base: 1,
+								md: 0
+							},
+							transitionProperty: "opacity",
+							transitionDuration: "fast",
+							onClick: handleToggleSorting,
+							children: /* @__PURE__ */ jsx(Show, {
+								when: isSortedDesc,
+								fallback: /* @__PURE__ */ jsx(SortAscIcon, {}),
+								children: /* @__PURE__ */ jsx(SortDescIcon, {})
+							})
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(HeaderCellOptions, { ...column }),
+			/* @__PURE__ */ jsx(Show, {
+				when: pinnedState === "pinned",
+				children: () => /* @__PURE__ */ jsx(ShadowFiller, {
+					style,
+					...pinnedAttr
+				})
+			})
+		]
+	});
 });
-const GridCell = memo(function GridCell2(props) {
-  const { column, row } = props;
-  const value = column.getValue(row);
-  const pinnedVal = useRead(column.pinned);
-  const pinnedState = usePinnedState(pinnedVal);
-  const pinnedAttr = usePinnedAttribute(pinnedVal);
-  const style = useColumnStyles(column, pinnedVal);
-  return /* @__PURE__ */ jsxs(
-    HStack,
-    {
-      role: "cell",
-      "data-scope": SCOPE,
-      "data-part": 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__ */ jsx(Show, { when: pinnedState === "pinned", children: () => /* @__PURE__ */ jsx(ShadowFiller, { style, ...pinnedAttr }) })
-      ]
-    }
-  );
+var GridCell = memo(function GridCell(props) {
+	const { column, row } = props;
+	const value = column.getValue(row);
+	const pinnedVal = useRead(column.pinned);
+	const pinnedState = usePinnedState(pinnedVal);
+	const pinnedAttr = usePinnedAttribute(pinnedVal);
+	const style = useColumnStyles(column, pinnedVal);
+	return /* @__PURE__ */ jsxs(HStack, {
+		role: "cell",
+		"data-scope": SCOPE,
+		"data-part": 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__ */ jsx(Show, {
+			when: pinnedState === "pinned",
+			children: () => /* @__PURE__ */ jsx(ShadowFiller, {
+				style,
+				...pinnedAttr
+			})
+		})]
+	});
 });
-const GridRow = memo(function GridRow2(props) {
-  const store = useDataGridContext();
-  const columns = useRead(store.columns);
-  return /* @__PURE__ */ jsx(GridRowContainer, { offsetY: props.offsetY, children: /* @__PURE__ */ jsx(For, { each: columns, children: (col) => /* @__PURE__ */ jsx(Show, { when: col.isVisible(), children: () => /* @__PURE__ */ jsx(GridCell, { row: props.row, column: col }) }, col.id) }) });
+var GridRow = memo(function GridRow(props) {
+	const columns = useRead(useDataGridContext().columns);
+	return /* @__PURE__ */ jsx(GridRowContainer, {
+		offsetY: props.offsetY,
+		children: /* @__PURE__ */ jsx(For, {
+			each: columns,
+			children: (col) => /* @__PURE__ */ jsx(Show, {
+				when: col.isVisible(),
+				children: () => /* @__PURE__ */ jsx(GridCell, {
+					row: props.row,
+					column: col
+				})
+			}, col.id)
+		})
+	});
 });
 function GridRowContainer(props) {
-  const isVirtualized = props.offsetY !== void 0;
-  return /* @__PURE__ */ jsx(
-    HStack,
-    {
-      role: "row",
-      "data-scope": SCOPE,
-      "data-part": 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__ */ jsx(HStack, {
+		role: "row",
+		"data-scope": SCOPE,
+		"data-part": 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__ */ 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__ */ 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
+	});
 }
-
-export { GridCell, GridHeaderCell, GridRow, GridViewport };
+//#endregion
+export { GridViewport };