@vesture/react 0.2.7 → 0.2.9

package/dist/index.d.ts

@@ -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,16 @@ 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;
@@ -488,13 +501,17 @@ interface ComboboxProps {
     disabled?: boolean;
     invalid?: boolean;
     loading?: boolean;
+    /** Number of filtered options at/above which the listbox switches to virtualized (windowed) rendering. */
+    virtualizationThreshold?: number;
+    /** Row height (px) used for virtualized listbox rows; defaults to the `.option` class's rendered height. */
+    optionHeight?: number;
     id?: string;
     className?: string;
     "aria-label"?: string;
     "aria-labelledby"?: string;
 }
 
-declare function Combobox({ options, multiple, value: controlledValue, defaultValue, onChange, onInputChange, filterOptions, placeholder, noOptionsMessage, disabled, invalid, loading, id, className, ...rest }: ComboboxProps): ReactElement;
+declare function Combobox({ options, multiple, value: controlledValue, defaultValue, onChange, onInputChange, filterOptions, placeholder, noOptionsMessage, disabled, invalid, loading, virtualizationThreshold, optionHeight, id, className, ...rest }: ComboboxProps): ReactElement;
 
 interface TreeNode<T = unknown> {
     id: 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,
@@ -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
                   };
@@ -3053,14 +3246,17 @@ import {
 var chip = "Combobox_chip__26nhic2";
 var chipRemove = "Combobox_chipRemove__26nhic3";
 var chipsWrapper = "Combobox_chipsWrapper__26nhic1";
-var emptyState2 = "Combobox_emptyState__26nhic7";
+var emptyState2 = "Combobox_emptyState__26nhic8";
 var inputEl = "Combobox_inputEl__26nhic4";
 var listbox = "Combobox_listbox__26nhic5";
 var option = "Combobox_option__26nhic6";
+var virtualSpacer = "Combobox_virtualSpacer__26nhic7";
 var wrapper9 = "Combobox_wrapper__26nhic0";
 
 // src/components/Combobox/Combobox.tsx
 import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+var DEFAULT_OPTION_HEIGHT = 37;
+var OVERSCAN = 5;
 function defaultFilter(options, inputText) {
   const query = inputText.trim().toLowerCase();
   if (!query) return options;
@@ -3083,6 +3279,8 @@ function Combobox({
   disabled = false,
   invalid,
   loading = false,
+  virtualizationThreshold = 50,
+  optionHeight = DEFAULT_OPTION_HEIGHT,
   id,
   className,
   ...rest
@@ -3109,8 +3307,37 @@ function Combobox({
     }
   }, [singleValue, multiple]);
   const inputRef = useRef9(null);
+  const listboxRef = useRef9(null);
   const listboxId = useId2();
+  const [scrollTop, setScrollTop] = useState14(0);
+  const [viewportHeight, setViewportHeight] = useState14(280);
   const filteredOptions = filterOptions(options, multiple ? inputText : open ? inputText : "");
+  const isVirtualized = filteredOptions.length >= virtualizationThreshold;
+  useEffect7(() => {
+    setScrollTop(0);
+    setActiveIndex(null);
+    if (listboxRef.current) listboxRef.current.scrollTop = 0;
+  }, [options]);
+  useEffect7(() => {
+    if (!open) return;
+    const node = listboxRef.current;
+    if (!node) return;
+    if (node.clientHeight > 0) setViewportHeight(node.clientHeight);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [open]);
+  const totalHeight = filteredOptions.length * optionHeight;
+  const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+  const effectiveScrollTop = Math.min(scrollTop, maxScrollTop);
+  const visibleCount = Math.ceil(viewportHeight / optionHeight) + OVERSCAN * 2;
+  const startIndex = isVirtualized ? Math.max(0, Math.floor(effectiveScrollTop / optionHeight) - OVERSCAN) : 0;
+  const endIndex = isVirtualized ? Math.min(filteredOptions.length, startIndex + visibleCount) : filteredOptions.length;
+  const visibleOptions = filteredOptions.slice(startIndex, endIndex);
   const { refs, floatingStyles, context } = useFloating7({
     open,
     onOpenChange: setOpen,
@@ -3155,6 +3382,21 @@ function Combobox({
     setOpen(true);
     setActiveIndex(null);
   };
+  const scrollIndexIntoView = (index) => {
+    if (!isVirtualized) return;
+    const rowTop = index * optionHeight;
+    const rowBottom = rowTop + optionHeight;
+    let next = scrollTop;
+    if (rowTop < scrollTop) {
+      next = rowTop;
+    } else if (rowBottom > scrollTop + viewportHeight) {
+      next = rowBottom - viewportHeight;
+    } else {
+      return;
+    }
+    setScrollTop(next);
+    if (listboxRef.current) listboxRef.current.scrollTop = next;
+  };
   const moveActiveIndex = (direction2) => {
     if (filteredOptions.length === 0) return;
     let next = activeIndex ?? (direction2 === 1 ? -1 : filteredOptions.length);
@@ -3162,6 +3404,7 @@ function Combobox({
       next = (next + direction2 + filteredOptions.length) % filteredOptions.length;
       if (!filteredOptions[next]?.disabled) {
         setActiveIndex(next);
+        scrollIndexIntoView(next);
         return;
       }
     }
@@ -3255,14 +3498,40 @@ function Combobox({
     open ? /* @__PURE__ */ jsx40(FloatingPortal7, { children: /* @__PURE__ */ jsx40(
       "div",
       {
-        ref: refs.setFloating,
+        ref: (node) => {
+          refs.setFloating(node);
+          listboxRef.current = node;
+        },
         id: listboxId,
         role: "listbox",
         "aria-multiselectable": multiple || void 0,
         className: listbox,
         style: floatingStyles,
+        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
         ...getFloatingProps(),
-        children: loading ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: "Loading\u2026" }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: noOptionsMessage }) : filteredOptions.map((opt, index) => {
+        children: loading ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: "Loading\u2026" }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx40("div", { className: emptyState2, children: noOptionsMessage }) : isVirtualized ? /* @__PURE__ */ jsx40("div", { className: virtualSpacer, style: { height: totalHeight }, children: visibleOptions.map((opt, i) => {
+          const index = startIndex + i;
+          const isSelected = multiple ? selectedValues.includes(opt.value) : opt.value === singleValue;
+          return /* @__PURE__ */ jsx40(
+            "div",
+            {
+              id: `${listboxId}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": opt.disabled || void 0,
+              "data-active": activeIndex === index || void 0,
+              className: option,
+              style: { position: "absolute", top: index * optionHeight, left: 0, right: 0, height: optionHeight },
+              onMouseDown: (event) => {
+                event.preventDefault();
+                selectOption(opt);
+              },
+              onMouseEnter: () => setActiveIndex(index),
+              children: opt.label
+            },
+            opt.value
+          );
+        }) }) : filteredOptions.map((opt, index) => {
           const isSelected = multiple ? selectedValues.includes(opt.value) : opt.value === singleValue;
           return /* @__PURE__ */ jsx40(
             "div",