@cerberus-design/data-grid 0.25.3

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

@@ -0,0 +1,81 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Show } from '@cerberus-design/react';
+import { useSignal, createEffect } from '@cerberus-design/signals';
+import { memo, useMemo, useRef, useEffect } from 'react';
+import { HStack, Stack } from 'styled-system/jsx';
+import { PARTS, SCOPE } from '../const.js';
+import { DataGridProvider } from '../context.client.js';
+import { createGridStore } from '../store.js';
+import { GridViewport } from './grid.client.js';
+import { GridPagination } from './pagination.client.js';
+
+function DataGridEl(props) {
+  const { data } = props;
+  const store = useMemo(
+    () => 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] = useSignal(false);
+  const rootRef = useRef(null);
+  useEffect(() => {
+    store.updateData(data);
+  }, [data, store]);
+  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 = createEffect(() => {
+      Object.entries(store.rootCssVars()).forEach(([key, val]) => {
+        el.style.setProperty(key, val);
+      });
+    });
+    setReady(true);
+    return () => {
+      observer.disconnect();
+      cleanupSignalEffect();
+    };
+  }, [store, setReady]);
+  return /* @__PURE__ */ jsxs(DataGridProvider, { createStore: () => store, children: [
+    /* @__PURE__ */ jsx(Show, { when: props.toolbar, children: () => /* @__PURE__ */ jsx(HStack, { "data-scope": SCOPE, "data-part": PARTS.TOOLBAR, w: "full", children: props.toolbar }) }),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        "data-scope": SCOPE,
+        "data-part": 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__ */ jsx(Show, { when: ready, children: () => /* @__PURE__ */ jsx(GridViewport, {}) }),
+          /* @__PURE__ */ jsx(Show, { when: props.footer, children: () => /* @__PURE__ */ jsx(HStack, { "data-scope": SCOPE, "data-part": PARTS.FOOTER, w: "full", children: props.footer }) }),
+          /* @__PURE__ */ jsx(GridPagination, {})
+        ]
+      }
+    )
+  ] });
+}
+const DataGrid = memo(DataGridEl);
+
+export { DataGrid };

package/dist/components/features.client.cjs

@@ -0,0 +1,79 @@
+'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 react$1 = require('react');
+const context_client = require('../context.client.cjs');
+const pinnedItems_client = require('./pinned-items.client.cjs');
+const sortItems_client = require('./sort-items.client.cjs');
+
+function HeaderCellOptions(props) {
+  const store = context_client.useDataGridContext();
+  const sorting = signals.useRead(store.sorting);
+  const { icons } = react.useCerberusContext();
+  const MoreOptionsIcon = icons.moreVertical;
+  const sortedVal = react$1.useMemo(() => {
+    const idx = sorting.findIndex((data) => data.id === props.id);
+    if (idx === -1) return void 0;
+    return sorting[idx];
+  }, [sorting, props.id]);
+  function handleSelect(details) {
+    const val = details.value;
+    const specialVal = val.split("_");
+    const category = specialVal[0];
+    const action = specialVal[1];
+    if (val === "filter") {
+      return console.log("Show Filter popover...");
+    }
+    if (val === "unsort") {
+      return store.setSort(props.id, null);
+    }
+    switch (category) {
+      case "pin":
+        return store.togglePinned(props.id, action);
+      case "unpin":
+        return store.togglePinned(props.id, false);
+      case "sort":
+        return store.setSort(props.id, action ?? null);
+      default:
+        console.error("Unhandled action:", { details, action });
+    }
+  }
+  if (!props.sortable && !props.pinnable && !props.filterable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { onSelect: handleSelect, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.IconButton,
+      {
+        ariaLabel: "View more options",
+        size: "sm",
+        opacity: {
+          base: 1,
+          md: 0
+        },
+        transitionProperty: "opacity",
+        transitionDuration: "fast",
+        _groupHover: { opacity: 1 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(MoreOptionsIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.MenuContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Show, { when: props.sortable, children: /* @__PURE__ */ jsxRuntime.jsx(sortItems_client.MatchSortItems, { sorting: sortedVal }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Show, { when: props.pinnable, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Show, { when: props.sortable, children: /* @__PURE__ */ jsxRuntime.jsx(react.MenuSeparator, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(pinnedItems_client.MatchPinnedItems, { pinned: props.pinned })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Show, { when: props.filterable, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.MenuSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "filter", children: "Filter" })
+      ] })
+    ] })
+  ] });
+}
+
+exports.HeaderCellOptions = HeaderCellOptions;

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

@@ -0,0 +1,2 @@
+import { InternalColumn } from '../types';
+export declare function HeaderCellOptions<TData>(props: InternalColumn<TData>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,2 @@
+import { InternalColumn } from '../types';
+export declare function HeaderCellOptions<TData>(props: InternalColumn<TData>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/features.client.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCerberusContext, Menu, MenuTrigger, IconButton, MenuContent, Show, MenuSeparator, MenuItem } from '@cerberus-design/react';
+import { useRead } from '@cerberus-design/signals';
+import { useMemo } from 'react';
+import { useDataGridContext } from '../context.client.js';
+import { MatchPinnedItems } from './pinned-items.client.js';
+import { MatchSortItems } from './sort-items.client.js';
+
+function HeaderCellOptions(props) {
+  const store = useDataGridContext();
+  const sorting = useRead(store.sorting);
+  const { icons } = useCerberusContext();
+  const MoreOptionsIcon = icons.moreVertical;
+  const sortedVal = useMemo(() => {
+    const idx = sorting.findIndex((data) => data.id === props.id);
+    if (idx === -1) return void 0;
+    return sorting[idx];
+  }, [sorting, props.id]);
+  function handleSelect(details) {
+    const val = details.value;
+    const specialVal = val.split("_");
+    const category = specialVal[0];
+    const action = specialVal[1];
+    if (val === "filter") {
+      return console.log("Show Filter popover...");
+    }
+    if (val === "unsort") {
+      return store.setSort(props.id, null);
+    }
+    switch (category) {
+      case "pin":
+        return store.togglePinned(props.id, action);
+      case "unpin":
+        return store.togglePinned(props.id, false);
+      case "sort":
+        return store.setSort(props.id, action ?? null);
+      default:
+        console.error("Unhandled action:", { details, action });
+    }
+  }
+  if (!props.sortable && !props.pinnable && !props.filterable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Menu, { onSelect: handleSelect, children: [
+    /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ariaLabel: "View more options",
+        size: "sm",
+        opacity: {
+          base: 1,
+          md: 0
+        },
+        transitionProperty: "opacity",
+        transitionDuration: "fast",
+        _groupHover: { opacity: 1 },
+        children: /* @__PURE__ */ jsx(MoreOptionsIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(MenuContent, { children: [
+      /* @__PURE__ */ jsx(Show, { when: props.sortable, children: /* @__PURE__ */ jsx(MatchSortItems, { sorting: sortedVal }) }),
+      /* @__PURE__ */ jsxs(Show, { when: props.pinnable, children: [
+        /* @__PURE__ */ jsx(Show, { when: props.sortable, children: /* @__PURE__ */ jsx(MenuSeparator, {}) }),
+        /* @__PURE__ */ jsx(MatchPinnedItems, { pinned: props.pinned })
+      ] }),
+      /* @__PURE__ */ jsxs(Show, { when: props.filterable, children: [
+        /* @__PURE__ */ jsx(MenuSeparator, {}),
+        /* @__PURE__ */ jsx(MenuItem, { value: "filter", children: "Filter" })
+      ] })
+    ] })
+  ] });
+}
+
+export { HeaderCellOptions };

package/dist/components/grid.client.cjs

@@ -0,0 +1,319 @@
+'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');
+
+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 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 }) })
+      ]
+    }
+  );
+});
+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 }) })
+      ]
+    }
+  );
+});
+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) }) });
+});
+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
+    }
+  );
+}
+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
+    }
+  );
+}
+
+exports.GridCell = GridCell;
+exports.GridHeaderCell = GridHeaderCell;
+exports.GridRow = GridRow;
+exports.GridViewport = GridViewport;

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

@@ -0,0 +1,19 @@
+import { InternalColumn } from '../types';
+import { MemoExoticComponent, NamedExoticComponent } from 'react';
+export declare function GridViewport(): import("react/jsx-runtime").JSX.Element;
+interface GridHeaderCellProps<TData> {
+    column: InternalColumn<TData>;
+}
+export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
+interface GridCellProps<TData> {
+    row: any;
+    column: InternalColumn<TData>;
+}
+export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
+interface GridRowProps {
+    row: unknown;
+    index: number;
+    offsetY?: number;
+}
+export declare const GridRow: NamedExoticComponent<GridRowProps>;
+export {};

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

@@ -0,0 +1,19 @@
+import { InternalColumn } from '../types';
+import { MemoExoticComponent, NamedExoticComponent } from 'react';
+export declare function GridViewport(): import("react/jsx-runtime").JSX.Element;
+interface GridHeaderCellProps<TData> {
+    column: InternalColumn<TData>;
+}
+export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
+interface GridCellProps<TData> {
+    row: any;
+    column: InternalColumn<TData>;
+}
+export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
+interface GridRowProps {
+    row: unknown;
+    index: number;
+    offsetY?: number;
+}
+export declare const GridRow: NamedExoticComponent<GridRowProps>;
+export {};