@xcelsior/ui-spreadsheets 1.2.2 → 1.3.0

package/src/components/RowIndexColumnHeader.tsx

@@ -2,8 +2,8 @@ import { cn } from '../utils';
 import { ColumnHeaderActions } from './ColumnHeaderActions';
 import { ROW_INDEX_COLUMN_WIDTH } from '../hooks/useSpreadsheetPinning';
 
-const cellPaddingCompact = 'px-1 py-0.5';
-const cellPaddingNormal = 'px-2 py-1.5';
+const cellPaddingCompact = 'px-1.5 py-1';
+const cellPaddingNormal = 'px-2 py-2';
 
 export interface RowIndexColumnHeaderProps {
     /** Whether highlighting is enabled */
@@ -16,7 +16,7 @@ export interface RowIndexColumnHeaderProps {
     onHighlightClick?: () => void;
     /** Callback when pin button is clicked */
     onPinClick?: () => void;
-    /** Whether this is the empty placeholder cell in the second header row (column headers row) */
+    /** Whether this is the empty placeholder cell in the group header row */
     isSecondRow?: boolean;
     /** Whether compact mode is enabled */
     compactMode?: boolean;
@@ -27,6 +27,7 @@ export interface RowIndexColumnHeaderProps {
 /**
  * Row index column header (#) with highlight and pin actions.
  * Uses the same ColumnHeaderActions component as regular columns for consistency.
+ * Vertical sticking is handled by the parent <thead>, this only handles horizontal sticking when pinned.
  */
 export function RowIndexColumnHeader({
     enableHighlighting = false,
@@ -40,24 +41,21 @@ export function RowIndexColumnHeader({
 }: RowIndexColumnHeaderProps) {
     const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
 
-    // Second row is an empty placeholder cell in the group header row - no content, just maintains alignment
-    // This should NOT be sticky vertically (no top: 0) - only the actual column header row should be sticky
+    // Group header row placeholder - always sticky left
     if (isSecondRow) {
         return (
             <th
                 className={cn(
-                    'border border-gray-200 text-center font-bold text-gray-700',
-                    compactMode ? 'text-[10px]' : 'text-xs',
+                    'border border-gray-200 text-center font-bold text-gray-700 sticky',
+                    compactMode ? 'text-xs' : 'text-sm',
                     cellPadding,
-                    isPinned ? 'z-30' : 'z-20',
                     className
                 )}
                 style={{
                     minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
                     width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-                    // Only sticky horizontally if pinned, NOT vertically
-                    position: isPinned ? 'sticky' : undefined,
-                    left: isPinned ? 0 : undefined,
+                    left: 0,
+                    zIndex: 50,
                     backgroundColor: highlightColor || 'rgb(243 244 246)',
                 }}
             />
@@ -67,18 +65,16 @@ export function RowIndexColumnHeader({
     return (
         <th
             className={cn(
-                'border border-gray-200 text-center font-bold text-gray-700 group',
-                compactMode ? 'text-[10px]' : 'text-xs',
+                'border border-gray-200 text-center font-bold text-gray-700 group sticky',
+                compactMode ? 'text-xs' : 'text-sm',
                 cellPadding,
-                isPinned ? 'z-30' : 'z-20',
                 className
             )}
             style={{
                 minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
                 width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-                position: 'sticky',
-                top: 0,
-                left: isPinned ? 0 : undefined,
+                left: 0,
+                zIndex: 50,
                 backgroundColor: highlightColor || 'rgb(243 244 246)',
             }}
         >

package/src/components/SelectionSummaryBar.tsx

@@ -0,0 +1,103 @@
+import type { SelectionSummary } from '../hooks/useSpreadsheetSummary';
+import type { CellPosition, SpreadsheetColumn } from '../types';
+
+export interface SelectionSummaryBarProps<T> {
+    /** Computed summary for numeric selections */
+    summary: SelectionSummary | null;
+    /** Currently focused cell */
+    focusedCell: CellPosition | null;
+    /** Column definitions */
+    columns: SpreadsheetColumn<T>[];
+    /** Current page's data */
+    data: T[];
+    /** Function to get row ID */
+    getRowId: (row: T) => string | number;
+    /** Current page number */
+    currentPage: number;
+    /** Page size */
+    pageSize: number;
+}
+
+/**
+ * Combined status bar showing cell address (left) and selection summary (right).
+ * Similar to Excel's bottom status bar.
+ */
+export function SelectionSummaryBar<T extends Record<string, any>>({
+    summary,
+    focusedCell,
+    columns,
+    data,
+    getRowId,
+    currentPage,
+    pageSize,
+}: SelectionSummaryBarProps<T>) {
+    // Compute address info
+    let addressDisplay: string | null = null;
+    let valueDisplay: string | null = null;
+
+    if (focusedCell) {
+        const column = columns.find((c) => c.id === focusedCell.columnId);
+        const rowIndex = data.findIndex((r) => getRowId(r) === focusedCell.rowId);
+        const row = rowIndex !== -1 ? data[rowIndex] : null;
+
+        if (column && row) {
+            const displayRowIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
+            addressDisplay = `Row ${displayRowIndex} / ${column.label}`;
+            const value = column.getValue ? column.getValue(row) : row[focusedCell.columnId];
+            if (value !== null && value !== undefined && value !== '') {
+                valueDisplay = String(value);
+            }
+        }
+    }
+
+    // Don't render if nothing to show
+    if (!addressDisplay && !summary) return null;
+
+    return (
+        <div className="flex items-center justify-between px-3 py-1.5 bg-gray-50 border-t border-gray-200 text-xs text-gray-600">
+            {/* Left: Cell address + value */}
+            <div className="flex items-center gap-2 min-w-0">
+                {addressDisplay && (
+                    <>
+                        <span className="font-medium text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200 shrink-0">
+                            {addressDisplay}
+                        </span>
+                        {valueDisplay && (
+                            <span className="text-gray-700 truncate" title={valueDisplay}>
+                                {valueDisplay}
+                            </span>
+                        )}
+                    </>
+                )}
+            </div>
+
+            {/* Right: Selection summary */}
+            {summary && (
+                <div className="flex items-center gap-4 shrink-0">
+                    <span>
+                        <span className="text-gray-400 mr-1">Count:</span>
+                        <span className="font-medium text-gray-700">{summary.numericCount}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Sum:</span>
+                        <span className="font-medium text-gray-700">{summary.sum.toLocaleString()}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Avg:</span>
+                        <span className="font-medium text-gray-700">{summary.avg.toLocaleString()}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Min:</span>
+                        <span className="font-medium text-gray-700">{summary.min.toLocaleString()}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Max:</span>
+                        <span className="font-medium text-gray-700">{summary.max.toLocaleString()}</span>
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+SelectionSummaryBar.displayName = 'SelectionSummaryBar';

package/src/components/Spreadsheet.stories.tsx

@@ -2115,6 +2115,260 @@ export const PinnedColumnsWithGroups: Story = {
 };
 
 // With Right-Pinned Columns
+/**
+ * Comprehensive test story that simulates a real-world logistics spreadsheet.
+ * 30+ columns across 5 groups, editable cells, 200 rows — enough to test:
+ * - Horizontal scrolling with many columns
+ * - Double-click to edit
+ * - Drag-to-select
+ * - Ctrl/Cmd+A select all
+ * - Zebra striping
+ * - Sticky row index
+ * - Enter to submit filter
+ * - Compact vs normal mode toggle
+ */
+interface DocketRecord {
+    id: number;
+    rego: string;
+    driver: string;
+    type: string;
+    date: string;
+    job: string;
+    customer: string;
+    custInv: string;
+    from: string;
+    tipSite: string;
+    comment: string;
+    docket: string;
+    custDocket: string;
+    uom: string;
+    qty: number;
+    rate: number;
+    totalPre: number;
+    totalPost: number;
+    tipName: string;
+    tipUom: string;
+    tipQty: number;
+    tipRate: number;
+    tipPre: number;
+    tipPost: number;
+    tipInvoice: string;
+    truckPre: number;
+    truckPost: number;
+    subRate: number;
+    subPre: number;
+    subPost: number;
+    subInvoice: string;
+    weekEnding: string;
+    profit: number;
+}
+
+const docketData: DocketRecord[] = Array.from({ length: 200 }, (_, i) => {
+    const qty = Math.round((1 + Math.random() * 50) * 100) / 100;
+    const rate = Math.round((10 + Math.random() * 90) * 100) / 100;
+    const totalPre = Math.round(qty * rate * 100) / 100;
+    const tipQty = Math.round((1 + Math.random() * 30) * 100) / 100;
+    const tipRate = Math.round((5 + Math.random() * 40) * 100) / 100;
+    const tipPre = Math.round(tipQty * tipRate * 100) / 100;
+    const subRate = Math.round((20 + Math.random() * 60) * 100) / 100;
+    const subPre = Math.round(qty * subRate * 100) / 100;
+    const profit = Math.round((totalPre - tipPre - subPre) * 100) / 100;
+
+    return {
+        id: i + 1,
+        rego: ['SPR4RO', 'XO78SR', 'KO04KW', 'CL24SS', 'XP60LQ'][i % 5],
+        driver: ['Donald Strathaam', 'James Urewis', 'Shaun Davis', 'Matthew Maddick', 'Steven Ayers'][i % 5],
+        type: ['LNG', 'SUBBY'][i % 2],
+        date: `2026-03-${String((i % 28) + 1).padStart(2, '0')}`,
+        job: ['BORAL ALLOCATION', 'HOLCIM LYNWOOD - PEJAR', 'EARTHWORK FIVEDOCK', 'GAMUDA ECOR'][i % 4],
+        customer: ['Boral Transport Ltd', 'Holcim (Australia) Pty Ltd', 'Earthworks Group', 'Gamuda Engineering'][i % 4],
+        custInv: `INV-${String(i + 1).padStart(5, '0')}`,
+        from: ['Unnamed Road, Marulan NSW 2579', 'Burrows Road South, Saint Peters NSW 2044', '25 Burrows Road South'][i % 3],
+        tipSite: ['Goulburn Road, Pejar NSW 2583', 'Ada Avenue, Brookvale NSW 2100', '52 Bay Road, Taren Point'][i % 3],
+        comment: i % 7 === 0 ? 'Check weight docket' : '',
+        docket: `E0100${String(i + 24).padStart(2, '0')}`,
+        custDocket: i % 3 === 0 ? `CD-${i + 100}` : '',
+        uom: ['Tonne', 'Load', 'Hour'][i % 3],
+        qty,
+        rate,
+        totalPre,
+        totalPost: Math.round(totalPre * 1.1 * 100) / 100,
+        tipName: ['Pejar Tip', 'Brookvale Tip', 'Taren Point Tip'][i % 3],
+        tipUom: ['Tonne', 'Load'][i % 2],
+        tipQty,
+        tipRate,
+        tipPre,
+        tipPost: Math.round(tipPre * 1.1 * 100) / 100,
+        tipInvoice: i % 4 === 0 ? `TIP-${i + 200}` : '',
+        truckPre: Math.round((500 + Math.random() * 1500) * 100) / 100,
+        truckPost: Math.round((550 + Math.random() * 1650) * 100) / 100,
+        subRate,
+        subPre,
+        subPost: Math.round(subPre * 1.1 * 100) / 100,
+        subInvoice: i % 5 === 0 ? `SUB-${i + 300}` : '',
+        weekEnding: `2026-03-${String(Math.min(28, ((Math.floor(i / 7) + 1) * 7))).padStart(2, '0')}`,
+        profit,
+    };
+});
+
+const docketColumns: SpreadsheetColumn<DocketRecord>[] = [
+    { id: 'rego', label: 'Rego', width: 85, sortable: true, filterable: true, editable: true },
+    { id: 'driver', label: 'Driver', width: 160, sortable: true, filterable: true },
+    { id: 'type', label: 'Type', width: 70, sortable: true, filterable: true, editable: true, type: 'select', options: ['LNG', 'SUBBY'] },
+    { id: 'date', label: 'Date', width: 100, sortable: true, filterable: true, type: 'date' },
+    { id: 'job', label: 'Job', width: 180, sortable: true, filterable: true },
+    { id: 'customer', label: 'Customer', width: 180, sortable: true, filterable: true },
+    { id: 'custInv', label: 'Cust Inv#', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'from', label: 'From', width: 200, sortable: true, filterable: true, editable: true },
+    { id: 'tipSite', label: 'Tip Site', width: 200, sortable: true, filterable: true, editable: true },
+    { id: 'comment', label: 'Comment', width: 150, sortable: true, filterable: true, editable: true },
+    { id: 'docket', label: 'Docket', width: 90, sortable: true, filterable: true },
+    { id: 'custDocket', label: 'Cust Docket', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'uom', label: 'UoM', width: 70, editable: true, type: 'select', options: ['Tonne', 'Load', 'Hour'] },
+    { id: 'qty', label: 'Qty', width: 70, sortable: true, type: 'number', align: 'right', editable: true },
+    { id: 'rate', label: 'Rate', width: 70, sortable: true, type: 'number', align: 'right', editable: true },
+    { id: 'totalPre', label: 'Total Pre', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'totalPost', label: 'Total Post', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'tipName', label: 'Tip Name', width: 140, sortable: true, filterable: true, editable: true },
+    { id: 'tipUom', label: 'Tip UoM', width: 70, editable: true, type: 'select', options: ['Tonne', 'Load'] },
+    { id: 'tipQty', label: 'Tip Qty', width: 70, sortable: true, filterable: true, type: 'number', align: 'right', editable: true },
+    { id: 'tipRate', label: 'Tip Rate', width: 70, sortable: true, filterable: true, type: 'number', align: 'right', editable: true },
+    { id: 'tipPre', label: 'Tip Pre', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'tipPost', label: 'Tip Post', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'tipInvoice', label: 'Tip Invoice', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'truckPre', label: 'Truck Pre', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'truckPost', label: 'Truck Post', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'subRate', label: 'Sub Rate', width: 80, sortable: true, filterable: true, type: 'number', align: 'right', editable: true },
+    { id: 'subPre', label: 'Sub Pre', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'subPost', label: 'Sub Post', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'subInvoice', label: 'Sub Invoice', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'weekEnding', label: 'Week Ending', width: 100, sortable: true },
+    {
+        id: 'profit',
+        label: 'Profit',
+        width: 90,
+        type: 'number',
+        align: 'right',
+        sortable: true,
+        render: (v) => {
+            const num = Number(v);
+            const color = num < 0 ? 'text-red-600' : 'text-green-600';
+            return <span className={`font-medium ${color}`}>${num.toFixed(2)}</span>;
+        },
+    },
+];
+
+const docketColumnGroups: SpreadsheetColumnGroup[] = [
+    {
+        id: 'customer-billing',
+        label: 'Customer & Billing',
+        columns: ['rego', 'driver', 'type', 'date', 'job', 'customer', 'custInv', 'from', 'tipSite', 'comment', 'docket', 'custDocket', 'uom', 'qty', 'rate', 'totalPre', 'totalPost'],
+        headerColor: '#93C5FD',
+        collapsible: true,
+    },
+    {
+        id: 'tip-site',
+        label: 'Tip Site',
+        columns: ['tipName', 'tipUom', 'tipQty', 'tipRate', 'tipPre', 'tipPost', 'tipInvoice'],
+        headerColor: '#86EFAC',
+        collapsible: true,
+    },
+    {
+        id: 'truck-hire',
+        label: 'Truck Hire',
+        columns: ['truckPre', 'truckPost'],
+        headerColor: '#FDBA74',
+        collapsible: true,
+    },
+    {
+        id: 'subcontractor',
+        label: 'Subcontractor',
+        columns: ['subRate', 'subPre', 'subPost', 'subInvoice'],
+        headerColor: '#D8B4FE',
+        collapsible: true,
+    },
+    {
+        id: 'summary',
+        label: 'Summary',
+        columns: ['weekEnding', 'profit'],
+        headerColor: '#D1D5DB',
+        collapsible: true,
+    },
+];
+
+const COMPREHENSIVE_STORAGE_KEY = 'storybook-comprehensive-test-settings';
+
+const getStoredComprehensiveSettings = () => {
+    try {
+        const stored = localStorage.getItem(COMPREHENSIVE_STORAGE_KEY);
+        return stored ? JSON.parse(stored) : null;
+    } catch { return null; }
+};
+
+export const ComprehensiveTest: Story = {
+    render: () => {
+        const [data, setData] = useState(docketData);
+        const storedSettings = getStoredComprehensiveSettings();
+
+        const handleCellsEdit = (edits: CellEdit[]) => {
+            setData((prev) =>
+                prev.map((row) => {
+                    const editsForRow = edits.filter((e) => e.rowId === row.id);
+                    if (editsForRow.length > 0) {
+                        const updates = editsForRow.reduce(
+                            (acc, edit) => ({ ...acc, [edit.columnId]: edit.value }),
+                            {}
+                        );
+                        return { ...row, ...updates };
+                    }
+                    return row;
+                })
+            );
+        };
+
+        return (
+            <div className="flex flex-col h-screen">
+                <div className="p-3 bg-blue-50 border-b border-blue-200 shrink-0">
+                    <h3 className="font-semibold text-blue-900 mb-1">
+                        Comprehensive Test — Docket Management
+                    </h3>
+                    <p className="text-xs text-blue-700">
+                        32 columns, 5 groups, 200 rows. Double-click to edit | Shift+Click for range | Cmd+A select all | Click header to select column | Sort via icon | Enter to submit filter | Resize columns by dragging header edges
+                    </p>
+                </div>
+
+                <div className="flex-1 min-h-0 p-2">
+                <Spreadsheet
+                    data={data}
+                    columns={docketColumns}
+                    columnGroups={docketColumnGroups}
+                    getRowId={(row) => row.id}
+                    onCellsEdit={handleCellsEdit}
+                    showToolbar
+                    showPagination
+                    enableRowSelection
+                    enableCellEditing
+                    enableHighlighting
+                    enableComments
+                    enableUndoRedo
+                    settings={{
+                        defaultPinnedColumns: storedSettings?.defaultPinnedColumns ?? ['__row_index__'],
+                        defaultPageSize: storedSettings?.defaultPageSize ?? 100,
+                        defaultZoom: storedSettings?.defaultZoom ?? 100,
+                        autoSave: storedSettings?.autoSave ?? true,
+                        compactView: storedSettings?.compactView ?? false,
+                        columnWidths: storedSettings?.columnWidths,
+                    }}
+                    onSettingsChange={(settings) => {
+                        localStorage.setItem(COMPREHENSIVE_STORAGE_KEY, JSON.stringify(settings));
+                    }}
+                />
+                </div>
+            </div>
+        );
+    },
+};
+
 export const WithRightPinnedColumns: Story = {
     render: () => {
         const [data, setData] = useState(sampleUsers);