@papernote/ui 1.10.21 → 1.10.23

package/dist/index.js

@@ -15057,52 +15057,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;
@@ -15111,7 +15103,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = requireCollection();
+	const Collection = collection;
 
 	const Types = {
 	    NUMBER: 0,
@@ -24765,7 +24757,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 = {
@@ -36393,7 +36385,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;
 
@@ -37155,7 +37147,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 {
@@ -39074,6 +39066,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
  *
@@ -39143,6 +39159,34 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
             return frozenRowsState;
         return 0;
     }, [frozenRowsState, selectedCell]);
+    // Build group color map for column banding
+    const groupColorMap = React.useMemo(() => buildGroupColorMap(columns), [columns]);
+    // Get header background class for a column (considers group banding)
+    const getHeaderBgClass = React.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 = React.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 = React.useCallback((rowIndex) => {
         if (frozenRowsState === 'none')
@@ -39517,7 +39561,8 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
                 }) })), jsxRuntime.jsx("div", { ref: tableRef, className: "relative overflow-auto border border-stone-200 rounded-lg bg-white", style: { height }, onKeyDown: handleKeyDown, tabIndex: 0, children: jsxRuntime.jsxs("table", { className: "border-collapse", style: { tableLayout: 'auto' }, children: [jsxRuntime.jsx("thead", { className: "sticky top-0 z-20 bg-stone-100", children: jsxRuntime.jsxs("tr", { children: [rowHeaders && (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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,
@@ -39543,7 +39588,8 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
                                             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 (jsxRuntime.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 (jsxRuntime.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 ? (jsxRuntime.jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsxRuntime.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));