@vesture/react 0.2.7 → 0.2.8

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,
@@ -1229,6 +1269,13 @@ function DataGridInner({
   pageSize,
   onPageChange,
   enableExport = false,
+  groupBy: controlledGroupBy,
+  defaultGroupBy,
+  onGroupByChange,
+  expandedGroups: controlledExpandedGroups,
+  defaultExpandedGroups,
+  onExpandedGroupsChange,
+  groupRowHeight,
   onRowClick,
   onRowDoubleClick,
   onCellClick
@@ -1248,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);
@@ -1315,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");
@@ -1348,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) => {
@@ -1479,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: [
@@ -1657,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
                   };