@papernote/ui 1.10.21 → 1.10.23

package/dist/components/DataGrid.d.ts

@@ -44,6 +44,10 @@ export interface DataGridColumn {
         prefix?: string;
         suffix?: string;
     };
+    /** Column group identifier for visual banding (e.g., "SalesAmount" groups base column with comparison variants) */
+    group?: string;
+    /** Variant type within a group: "current", "prior", "variance", "variancePct" */
+    variant?: 'current' | 'prior' | 'variance' | 'variancePct';
 }
 /**
  * Sort configuration

package/dist/components/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../src/components/DataGrid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../src/components/DataGrid.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -5690,6 +5690,10 @@ interface DataGridColumn {
         prefix?: string;
         suffix?: string;
     };
+    /** Column group identifier for visual banding (e.g., "SalesAmount" groups base column with comparison variants) */
+    group?: string;
+    /** Variant type within a group: "current", "prior", "variance", "variancePct" */
+    variant?: 'current' | 'prior' | 'variance' | 'variancePct';
 }
 /**
  * Frozen row mode options

package/dist/index.esm.js

@@ -15037,52 +15037,44 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-var collection;
-var hasRequiredCollection;
-
-function requireCollection () {
-	if (hasRequiredCollection) return collection;
-	hasRequiredCollection = 1;
-	class Collection {
-
-	    constructor(data, refs) {
-	        if (data == null && refs == null) {
-	            this._data = [];
-	            this._refs = [];
-	        } else {
-	            if (data.length !== refs.length)
-	                throw Error('Collection: data length should match references length.');
-	            this._data = data;
-	            this._refs = refs;
-	        }
-	    }
+let Collection$3 = class Collection {
 
-	    get data() {
-	        return this._data;
-	    }
+    constructor(data, refs) {
+        if (data == null && refs == null) {
+            this._data = [];
+            this._refs = [];
+        } else {
+            if (data.length !== refs.length)
+                throw Error('Collection: data length should match references length.');
+            this._data = data;
+            this._refs = refs;
+        }
+    }
 
-	    get refs() {
-	        return this._refs;
-	    }
+    get data() {
+        return this._data;
+    }
 
-	    get length() {
-	        return this._data.length;
-	    }
+    get refs() {
+        return this._refs;
+    }
 
-	    /**
-	     * Add data and references to this collection.
-	     * @param {{}} obj - data
-	     * @param {{}} ref - reference
-	     */
-	    add(obj, ref) {
-	        this._data.push(obj);
-	        this._refs.push(ref);
-	    }
-	}
+    get length() {
+        return this._data.length;
+    }
 
-	collection = Collection;
-	return collection;
-}
+    /**
+     * Add data and references to this collection.
+     * @param {{}} obj - data
+     * @param {{}} ref - reference
+     */
+    add(obj, ref) {
+        this._data.push(obj);
+        this._refs.push(ref);
+    }
+};
+
+var collection = Collection$3;
 
 var helpers;
 var hasRequiredHelpers;
@@ -15091,7 +15083,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = requireCollection();
+	const Collection = collection;
 
 	const Types = {
 	    NUMBER: 0,
@@ -24745,7 +24737,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = requireCollection();
+const Collection$2 = collection;
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -36373,7 +36365,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = requireCollection();
+const Collection$1 = collection;
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -37135,7 +37127,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = requireCollection();
+const Collection = collection;
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {
@@ -39054,6 +39046,30 @@ const colIndexToLetter = (index) => {
 };
 // Note: parseRef is available for future formula reference parsing
 // const parseRef = (ref: string): { row: number; col: number } | null => { ... }
+/**
+ * Color banding for column groups (e.g., comparison columns)
+ * Alternates between color sets to visually distinguish groups
+ */
+const COLUMN_GROUP_COLORS = [
+    { header: 'bg-sky-100', cell: 'bg-sky-50', cellAlt: 'bg-sky-100/50' },
+    { header: 'bg-amber-100', cell: 'bg-amber-50', cellAlt: 'bg-amber-100/50' },
+    { header: 'bg-emerald-100', cell: 'bg-emerald-50', cellAlt: 'bg-emerald-100/50' },
+    { header: 'bg-pink-100', cell: 'bg-pink-50', cellAlt: 'bg-pink-100/50' },
+];
+/**
+ * Build a map of group names to color indices for column banding
+ */
+const buildGroupColorMap = (columns) => {
+    const groupColorMap = new Map();
+    let colorIndex = 0;
+    for (const col of columns) {
+        if (col.group && !groupColorMap.has(col.group)) {
+            groupColorMap.set(col.group, colorIndex % COLUMN_GROUP_COLORS.length);
+            colorIndex++;
+        }
+    }
+    return groupColorMap;
+};
 /**
  * DataGrid - Excel-like data grid component with formulas
  *
@@ -39123,6 +39139,34 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
             return frozenRowsState;
         return 0;
     }, [frozenRowsState, selectedCell]);
+    // Build group color map for column banding
+    const groupColorMap = useMemo(() => buildGroupColorMap(columns), [columns]);
+    // Get header background class for a column (considers group banding)
+    const getHeaderBgClass = useCallback((column) => {
+        if (column.group) {
+            const colorIdx = groupColorMap.get(column.group);
+            if (colorIdx !== undefined) {
+                return COLUMN_GROUP_COLORS[colorIdx].header;
+            }
+        }
+        return 'bg-stone-100';
+    }, [groupColorMap]);
+    // Get cell background class for a column (considers group banding and zebra)
+    const getCellBgClass = useCallback((column, isZebra, isFrozenCol) => {
+        if (column.group) {
+            const colorIdx = groupColorMap.get(column.group);
+            if (colorIdx !== undefined) {
+                const colors = COLUMN_GROUP_COLORS[colorIdx];
+                return isZebra ? colors.cellAlt : colors.cell;
+            }
+        }
+        // Default behavior
+        if (isZebra && isFrozenCol)
+            return 'bg-paper-50';
+        if (isFrozenCol)
+            return 'bg-white';
+        return '';
+    }, [groupColorMap]);
     // Check if a specific row is frozen
     const isRowFrozen = useCallback((rowIndex) => {
         if (frozenRowsState === 'none')
@@ -39497,7 +39541,8 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
                 }) })), jsx("div", { ref: tableRef, className: "relative overflow-auto border border-stone-200 rounded-lg bg-white", style: { height }, onKeyDown: handleKeyDown, tabIndex: 0, children: jsxs("table", { className: "border-collapse", style: { tableLayout: 'auto' }, children: [jsx("thead", { className: "sticky top-0 z-20 bg-stone-100", children: jsxs("tr", { children: [rowHeaders && (jsx("th", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-100 text-left font-semibold text-ink-600 sticky left-0 z-30`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: "#" })), columns.map((column, colIndex) => {
                                         const isFrozen = colIndex < frozenColumns;
                                         const leftOffset = rowHeaders ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0) : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
-                                        return (jsx("th", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-100 font-semibold text-ink-600 text-${column.align || 'left'} ${isFrozen ? 'sticky z-30' : ''}`, style: {
+                                        const headerBgClass = getHeaderBgClass(column);
+                                        return (jsx("th", { className: `${cellPadding} border-b border-r border-stone-200 ${headerBgClass} font-semibold text-ink-600 text-${column.align || 'left'} ${isFrozen ? 'sticky z-30' : ''}`, style: {
                                                 width: column.width,
                                                 minWidth: column.minWidth || 80,
                                                 left: isFrozen ? leftOffset : undefined,
@@ -39523,7 +39568,8 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
                                             const leftOffset = rowHeaders
                                                 ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0)
                                                 : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
-                                            return (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 text-${column?.align || 'left'} ${isFrozenCol ? 'sticky z-10' : ''} ${isZebra && isFrozenCol ? 'bg-paper-50' : isFrozenCol ? 'bg-white' : ''} ${isSelected ? 'ring-2 ring-inset ring-primary-500' : ''} ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`, style: {
+                                            const cellBgClass = getCellBgClass(column, isZebra, isFrozenCol);
+                                            return (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 text-${column?.align || 'left'} ${isFrozenCol ? 'sticky z-10' : ''} ${cellBgClass} ${isSelected ? 'ring-2 ring-inset ring-primary-500' : ''} ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`, style: {
                                                     left: isFrozenCol ? leftOffset : undefined,
                                                     minWidth: column?.minWidth || 80,
                                                 }, onClick: () => handleCellClick(rowIndex, colIndex), onDoubleClick: (e) => handleCellDoubleClick(rowIndex, colIndex, e.currentTarget), children: isEditing ? (formulas ? (jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleEditComplete, onKeyDown: handleEditKeyDown, className: "w-full h-full border-none outline-none bg-transparent", style: { margin: '-4px', padding: '4px' } }))) : (formatValue(cell?.value, column)) }, colIndex));