@vesture/react 0.2.6 → 0.2.8

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ReactNode, HTMLAttributes, ReactElement, MutableRefObject, AnchorHTMLAttributes, ForwardedRef, CSSProperties } from 'react';
+import { ButtonHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ReactNode, HTMLAttributes, ReactElement, MutableRefObject, AnchorHTMLAttributes, MouseEvent, ForwardedRef, CSSProperties } from 'react';
 import { Placement } from '@floating-ui/react';
 export { defaultThemeClass, defaultThemeVars, vars } from '@vesture/tokens';
 
@@ -278,6 +278,7 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 }
 declare function Alert({ variant, title: titleText, onDismiss, children, className, ...rest }: AlertProps): ReactElement;
 
+type AggregateType = "sum" | "avg" | "count" | "min" | "max";
 interface DataGridColumn<T> {
     key: string;
     header: ReactNode;
@@ -297,6 +298,8 @@ interface DataGridColumn<T> {
     render?: (row: T) => ReactNode;
     /** Value used when exporting this column; falls back to accessor, then the raw row value. Not derived from render, since render returns a ReactNode. */
     exportValue?: (row: T) => string | number;
+    /** Computed per-group when the grid is grouped, and shown in this column's slot within the group header row. */
+    aggregate?: AggregateType | ((rows: T[]) => ReactNode);
 }
 type SortDirection = "asc" | "desc" | null;
 interface SortState {
@@ -336,6 +339,19 @@ interface DataGridProps<T> {
     onPageChange?: (page: number) => void;
     /** Renders an "Export" button in the grid's toolbar that exports the current view to Excel. */
     enableExport?: boolean;
+    /** Groups rows by this column key (single-level). undefined = no grouping. */
+    groupBy?: string;
+    defaultGroupBy?: string;
+    onGroupByChange?: (key: string | undefined) => void;
+    /** Which group keys are expanded. Default: all expanded. */
+    expandedGroups?: Set<string>;
+    defaultExpandedGroups?: Set<string>;
+    onExpandedGroupsChange?: (expanded: Set<string>) => void;
+    /** Height of a group header row; defaults to rowHeight. */
+    groupRowHeight?: number;
+    onRowClick?: (row: T, event: MouseEvent<HTMLDivElement>) => void;
+    onRowDoubleClick?: (row: T, event: MouseEvent<HTMLDivElement>) => void;
+    onCellClick?: (row: T, column: DataGridColumn<T>, event: MouseEvent<HTMLDivElement>) => void;
 }
 interface DataGridExportOptions {
     filename?: string;

package/dist/index.js

@@ -1116,12 +1116,18 @@ var body3 = "DataGrid_body__7xivx77";
 var cell = "DataGrid_cell__7xivx79";
 var checkboxCell = "DataGrid_checkboxCell__7xivx7a";
 var container = "DataGrid_container__7xivx71";
-var editInput = "DataGrid_editInput__7xivx7p";
+var editInput = "DataGrid_editInput__7xivx7v";
 var emptyState = "DataGrid_emptyState__7xivx7b";
 var filterCell = "DataGrid_filterCell__7xivx7j";
 var filterInput = "DataGrid_filterInput__7xivx7k";
 var filterRow = "DataGrid_filterRow__7xivx7i";
 var gridWrapper = "DataGrid_gridWrapper__7xivx7m";
+var groupAggregateItem = "DataGrid_groupAggregateItem__7xivx7u";
+var groupAggregates = "DataGrid_groupAggregates__7xivx7t";
+var groupChevron = "DataGrid_groupChevron__7xivx7q";
+var groupCount = "DataGrid_groupCount__7xivx7s";
+var groupLabel = "DataGrid_groupLabel__7xivx7r";
+var groupRow = "DataGrid_groupRow__7xivx7p";
 var headerButton = "DataGrid_headerButton__7xivx74";
 var headerCell = "DataGrid_headerCell__7xivx73";
 var headerRow = "DataGrid_headerRow__7xivx72";
@@ -1206,6 +1212,40 @@ function getCellValue(column, row3) {
   }
   return row3[column.key];
 }
+function getGroupValue(row3, groupBy, column) {
+  if (column) {
+    return String(getCellValue(column, row3) ?? "");
+  }
+  return String(row3[groupBy] ?? "");
+}
+function formatAggregateNumber(value) {
+  return Number.isInteger(value) ? value : value.toFixed(2);
+}
+function computeAggregate(column, rows) {
+  const { aggregate } = column;
+  if (!aggregate) return null;
+  if (typeof aggregate === "function") {
+    return aggregate(rows);
+  }
+  if (aggregate === "count") {
+    return rows.length;
+  }
+  const values = rows.map((r) => Number(getCellValue(column, r)) || 0);
+  switch (aggregate) {
+    case "sum":
+      return formatAggregateNumber(values.reduce((a, b) => a + b, 0));
+    case "avg":
+      return formatAggregateNumber(
+        values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0
+      );
+    case "min":
+      return formatAggregateNumber(values.length ? Math.min(...values) : 0);
+    case "max":
+      return formatAggregateNumber(values.length ? Math.max(...values) : 0);
+    default:
+      return null;
+  }
+}
 function DataGridInner({
   columns,
   data,
@@ -1228,7 +1268,17 @@ function DataGridInner({
   page,
   pageSize,
   onPageChange,
-  enableExport = false
+  enableExport = false,
+  groupBy: controlledGroupBy,
+  defaultGroupBy,
+  onGroupByChange,
+  expandedGroups: controlledExpandedGroups,
+  defaultExpandedGroups,
+  onExpandedGroupsChange,
+  groupRowHeight,
+  onRowClick,
+  onRowDoubleClick,
+  onCellClick
 }, ref) {
   const [uncontrolledSort, setUncontrolledSort] = useState8(
     null
@@ -1245,10 +1295,31 @@ function DataGridInner({
   const [scrollTop, setScrollTop] = useState8(0);
   const [editingRowId, setEditingRowId] = useState8(null);
   const [editDraft, setEditDraft] = useState8({});
+  const [uncontrolledGroupBy, setUncontrolledGroupBy] = useState8(defaultGroupBy);
+  const [uncontrolledExpandedGroups, setUncontrolledExpandedGroups] = useState8(defaultExpandedGroups);
   const editingEnabled = Boolean(onRowEdit);
   const sort = controlledSort !== void 0 ? controlledSort : uncontrolledSort;
   const filters = controlledFilters !== void 0 ? controlledFilters : uncontrolledFilters;
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
+  const groupBy = controlledGroupBy !== void 0 ? controlledGroupBy : uncontrolledGroupBy;
+  const expandedGroups = controlledExpandedGroups !== void 0 ? controlledExpandedGroups : uncontrolledExpandedGroups;
+  const setExpandedGroups = (next) => {
+    if (controlledExpandedGroups === void 0) {
+      setUncontrolledExpandedGroups(next);
+    }
+    onExpandedGroupsChange?.(next);
+  };
+  const isGroupExpanded = (key) => expandedGroups === void 0 ? true : expandedGroups.has(key);
+  const toggleGroupExpanded = (key, allGroupKeys) => {
+    const current2 = expandedGroups ?? new Set(allGroupKeys);
+    const next = new Set(current2);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    setExpandedGroups(next);
+  };
   const setSort = (next) => {
     if (controlledSort === void 0) {
       setUncontrolledSort(next);
@@ -1312,6 +1383,44 @@ function DataGridInner({
     );
     return sort.direction === "desc" ? sorted.reverse() : sorted;
   }, [filteredData, sort, columns, serverSide, data]);
+  const groupColumn = useMemo2(
+    () => groupBy ? columns.find((c) => c.key === groupBy) : void 0,
+    [columns, groupBy]
+  );
+  const groupedMap = useMemo2(() => {
+    if (!groupBy) return null;
+    const map = /* @__PURE__ */ new Map();
+    for (const row3 of sortedData) {
+      const key = getGroupValue(row3, groupBy, groupColumn);
+      const existing = map.get(key);
+      if (existing) {
+        existing.push(row3);
+      } else {
+        map.set(key, [row3]);
+      }
+    }
+    return map;
+  }, [sortedData, groupBy, groupColumn]);
+  const flatEntries = useMemo2(() => {
+    if (!groupedMap) {
+      return sortedData.map((row3) => ({ type: "data", row: row3 }));
+    }
+    const entries = [];
+    for (const [key, rows] of groupedMap) {
+      const collapsed = !isGroupExpanded(key);
+      entries.push({ type: "group", key, rows, collapsed });
+      if (!collapsed) {
+        for (const row3 of rows) {
+          entries.push({ type: "data", row: row3 });
+        }
+      }
+    }
+    return entries;
+  }, [groupedMap, expandedGroups, sortedData]);
+  const visibleDataRows = useMemo2(
+    () => flatEntries.filter((e) => e.type === "data").map((e) => e.row),
+    [flatEntries]
+  );
   const exportToExcel = useCallback2(
     async (options) => {
       const XLSX = await import("xlsx");
@@ -1345,13 +1454,13 @@ function DataGridInner({
   }, [columns, data]);
   const hasFilterableColumns = columns.some((c) => c.filterable);
   const showPagination = page !== void 0 && pageSize !== void 0 && onPageChange !== void 0;
-  const allSelected = sortedData.length > 0 && sortedData.every((r) => selectedIds.has(getRowId(r)));
-  const someSelected = !allSelected && sortedData.some((r) => selectedIds.has(getRowId(r)));
+  const allSelected = visibleDataRows.length > 0 && visibleDataRows.every((r) => selectedIds.has(getRowId(r)));
+  const someSelected = !allSelected && visibleDataRows.some((r) => selectedIds.has(getRowId(r)));
   const toggleAll = () => {
     if (allSelected) {
       setSelectedIds(/* @__PURE__ */ new Set());
     } else {
-      setSelectedIds(new Set(sortedData.map(getRowId)));
+      setSelectedIds(new Set(visibleDataRows.map(getRowId)));
     }
   };
   const toggleRow = (id) => {
@@ -1476,11 +1585,47 @@ function DataGridInner({
     setEditingRowId(null);
     setEditDraft({});
   };
-  const totalHeight = sortedData.length * rowHeight;
-  const visibleCount = Math.ceil(height / rowHeight) + overscan * 2;
-  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
-  const endIndex = Math.min(sortedData.length, startIndex + visibleCount);
-  const visibleRows = sortedData.slice(startIndex, endIndex);
+  const resolvedGroupRowHeight = groupRowHeight ?? rowHeight;
+  const rowOffsets = groupedMap ? (() => {
+    const offsets = new Array(flatEntries.length);
+    let acc = 0;
+    for (let i = 0; i < flatEntries.length; i++) {
+      offsets[i] = acc;
+      acc += flatEntries[i].type === "group" ? resolvedGroupRowHeight : rowHeight;
+    }
+    return offsets;
+  })() : null;
+  function findIndexAtOffset(offsets, target) {
+    let lo = 0;
+    let hi = offsets.length - 1;
+    let ans = 0;
+    while (lo <= hi) {
+      const mid = lo + hi >> 1;
+      if (offsets[mid] <= target) {
+        ans = mid;
+        lo = mid + 1;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    return ans;
+  }
+  let totalHeight;
+  let startIndex;
+  let endIndex;
+  if (rowOffsets) {
+    totalHeight = rowOffsets.length ? rowOffsets[rowOffsets.length - 1] + (flatEntries[flatEntries.length - 1].type === "group" ? resolvedGroupRowHeight : rowHeight) : 0;
+    const rawStart = rowOffsets.length ? findIndexAtOffset(rowOffsets, scrollTop) : 0;
+    startIndex = Math.max(0, rawStart - overscan);
+    const rawEnd = rowOffsets.length ? findIndexAtOffset(rowOffsets, scrollTop + height) + 1 : 0;
+    endIndex = Math.min(flatEntries.length, rawEnd + overscan);
+  } else {
+    totalHeight = sortedData.length * rowHeight;
+    const visibleCount = Math.ceil(height / rowHeight) + overscan * 2;
+    startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+    endIndex = Math.min(flatEntries.length, startIndex + visibleCount);
+  }
+  const visibleEntries = flatEntries.slice(startIndex, endIndex);
   const totalWidth = (selectable ? CHECKBOX_COLUMN_WIDTH : 0) + (editingEnabled ? ACTIONS_COLUMN_WIDTH : 0) + columns.reduce((sum, c) => sum + widthOf(c), 0);
   return /* @__PURE__ */ jsxs17(Fragment5, { children: [
     /* @__PURE__ */ jsxs17("div", { className: gridWrapper, children: [
@@ -1654,13 +1799,64 @@ function DataGridInner({
                   width: totalWidth,
                   minWidth: "100%"
                 },
-                children: visibleRows.map((rowData, i) => {
+                children: visibleEntries.map((entry, i) => {
                   const index = startIndex + i;
+                  const top = rowOffsets ? rowOffsets[index] : index * rowHeight;
+                  if (entry.type === "group") {
+                    const isExpanded = !entry.collapsed;
+                    const groupLabelText = groupColumn ? typeof groupColumn.header === "string" ? groupColumn.header : groupColumn.key : groupBy;
+                    const aggregateColumns = columns.filter((c) => c.aggregate);
+                    return /* @__PURE__ */ jsxs17(
+                      "div",
+                      {
+                        className: groupRow,
+                        style: {
+                          top,
+                          height: resolvedGroupRowHeight,
+                          width: totalWidth
+                        },
+                        role: "row",
+                        children: [
+                          /* @__PURE__ */ jsx34(
+                            "button",
+                            {
+                              type: "button",
+                              className: groupChevron,
+                              "data-expanded": isExpanded || void 0,
+                              onClick: () => toggleGroupExpanded(
+                                entry.key,
+                                Array.from(groupedMap.keys())
+                              ),
+                              "aria-label": isExpanded ? `Collapse group ${entry.key}` : `Expand group ${entry.key}`,
+                              children: "\u203A"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs17("span", { className: groupLabel, children: [
+                            groupLabelText,
+                            ": ",
+                            entry.key
+                          ] }),
+                          /* @__PURE__ */ jsxs17("span", { className: groupCount, children: [
+                            entry.rows.length,
+                            " row",
+                            entry.rows.length === 1 ? "" : "s"
+                          ] }),
+                          aggregateColumns.length > 0 ? /* @__PURE__ */ jsx34("span", { className: groupAggregates, children: aggregateColumns.map((c) => /* @__PURE__ */ jsxs17("span", { className: groupAggregateItem, children: [
+                            typeof c.header === "string" ? c.header : c.key,
+                            ": ",
+                            computeAggregate(c, entry.rows)
+                          ] }, c.key)) }) : null
+                        ]
+                      },
+                      `group-${entry.key}`
+                    );
+                  }
+                  const rowData = entry.row;
                   const id = getRowId(rowData);
                   const isSelected = selectedIds.has(id);
                   const isEditing = editingRowId === id;
                   const style = {
-                    top: index * rowHeight,
+                    top,
                     height: rowHeight,
                     width: totalWidth
                   };
@@ -1672,6 +1868,8 @@ function DataGridInner({
                       role: "row",
                       "data-selected": isSelected || void 0,
                       "data-editing": isEditing || void 0,
+                      onClick: onRowClick ? (e) => onRowClick(rowData, e) : void 0,
+                      onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(rowData, e) : void 0,
                       children: [
                         selectable ? /* @__PURE__ */ jsx34(
                           "div",
@@ -1679,6 +1877,7 @@ function DataGridInner({
                             className: [checkboxCell, pinnedCell].join(" "),
                             style: { left: 0 },
                             role: "cell",
+                            onClick: (e) => e.stopPropagation(),
                             children: /* @__PURE__ */ jsx34(
                               "input",
                               {
@@ -1699,6 +1898,7 @@ function DataGridInner({
                               ...pinnedStyle(column)
                             },
                             role: "cell",
+                            onClick: onCellClick ? (e) => onCellClick(rowData, column, e) : void 0,
                             children: isEditing && column.editable ? /* @__PURE__ */ jsx34(
                               "input",
                               {
@@ -1726,6 +1926,7 @@ function DataGridInner({
                             className: [actionsCell, pinnedCell].join(" "),
                             style: { right: 0 },
                             role: "cell",
+                            onClick: (e) => e.stopPropagation(),
                             children: isEditing ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
                               /* @__PURE__ */ jsx34(
                                 "button",