@xcelsior/ui-spreadsheets 1.1.12 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-spreadsheets",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/Spreadsheet.stories.tsx

@@ -1614,10 +1614,123 @@ interface StockData {
     profit: number;
 }
 
-const tickers = ['AAPL', 'MSFT', 'GOOGL', 'AMZN', 'META', 'TSLA', 'NVDA', 'JPM', 'V', 'JNJ', 'WMT', 'PG', 'MA', 'UNH', 'HD', 'DIS', 'BAC', 'XOM', 'PFE', 'KO', 'PEP', 'CSCO', 'ADBE', 'NFLX', 'INTC', 'CRM', 'ABT', 'NKE', 'MRK', 'TMO', 'ORCL', 'ACN', 'MDT', 'COST', 'LLY', 'AVGO', 'TXN', 'NEE', 'UNP', 'DHR', 'QCOM', 'PM', 'BMY', 'RTX', 'HON', 'UPS', 'LOW', 'AMGN', 'SBUX', 'IBM'];
-const companies = ['Apple Inc.', 'Microsoft Corp.', 'Alphabet Inc.', 'Amazon.com Inc.', 'Meta Platforms', 'Tesla Inc.', 'NVIDIA Corp.', 'JPMorgan Chase', 'Visa Inc.', 'Johnson & Johnson', 'Walmart Inc.', 'Procter & Gamble', 'Mastercard', 'UnitedHealth', 'Home Depot', 'Walt Disney', 'Bank of America', 'Exxon Mobil', 'Pfizer Inc.', 'Coca-Cola', 'PepsiCo Inc.', 'Cisco Systems', 'Adobe Inc.', 'Netflix Inc.', 'Intel Corp.', 'Salesforce', 'Abbott Labs', 'Nike Inc.', 'Merck & Co.', 'Thermo Fisher', 'Oracle Corp.', 'Accenture', 'Medtronic', 'Costco', 'Eli Lilly', 'Broadcom', 'Texas Instruments', 'NextEra Energy', 'Union Pacific', 'Danaher', 'Qualcomm', 'Philip Morris', 'Bristol-Myers', 'Raytheon', 'Honeywell', 'UPS', 'Lowes', 'Amgen', 'Starbucks', 'IBM'];
+const tickers = [
+    'AAPL',
+    'MSFT',
+    'GOOGL',
+    'AMZN',
+    'META',
+    'TSLA',
+    'NVDA',
+    'JPM',
+    'V',
+    'JNJ',
+    'WMT',
+    'PG',
+    'MA',
+    'UNH',
+    'HD',
+    'DIS',
+    'BAC',
+    'XOM',
+    'PFE',
+    'KO',
+    'PEP',
+    'CSCO',
+    'ADBE',
+    'NFLX',
+    'INTC',
+    'CRM',
+    'ABT',
+    'NKE',
+    'MRK',
+    'TMO',
+    'ORCL',
+    'ACN',
+    'MDT',
+    'COST',
+    'LLY',
+    'AVGO',
+    'TXN',
+    'NEE',
+    'UNP',
+    'DHR',
+    'QCOM',
+    'PM',
+    'BMY',
+    'RTX',
+    'HON',
+    'UPS',
+    'LOW',
+    'AMGN',
+    'SBUX',
+    'IBM',
+];
+const companies = [
+    'Apple Inc.',
+    'Microsoft Corp.',
+    'Alphabet Inc.',
+    'Amazon.com Inc.',
+    'Meta Platforms',
+    'Tesla Inc.',
+    'NVIDIA Corp.',
+    'JPMorgan Chase',
+    'Visa Inc.',
+    'Johnson & Johnson',
+    'Walmart Inc.',
+    'Procter & Gamble',
+    'Mastercard',
+    'UnitedHealth',
+    'Home Depot',
+    'Walt Disney',
+    'Bank of America',
+    'Exxon Mobil',
+    'Pfizer Inc.',
+    'Coca-Cola',
+    'PepsiCo Inc.',
+    'Cisco Systems',
+    'Adobe Inc.',
+    'Netflix Inc.',
+    'Intel Corp.',
+    'Salesforce',
+    'Abbott Labs',
+    'Nike Inc.',
+    'Merck & Co.',
+    'Thermo Fisher',
+    'Oracle Corp.',
+    'Accenture',
+    'Medtronic',
+    'Costco',
+    'Eli Lilly',
+    'Broadcom',
+    'Texas Instruments and technology and HSBC',
+    'NextEra Energy',
+    'Union Pacific',
+    'Danaher',
+    'Qualcomm',
+    'Philip Morris',
+    'Bristol-Myers',
+    'Raytheon',
+    'Honeywell',
+    'UPS',
+    'Lowes',
+    'Amgen',
+    'Starbucks',
+    'IBM',
+];
 const sectors = ['Technology', 'Healthcare', 'Financials', 'Consumer', 'Energy', 'Industrials'];
-const industries = ['Software', 'Hardware', 'Biotech', 'Banking', 'Retail', 'Semiconductors', 'Pharma', 'Media', 'Oil & Gas', 'Aerospace'];
+const industries = [
+    'Software',
+    'Hardware',
+    'Biotech',
+    'Banking',
+    'Retail',
+    'Semiconductors',
+    'Pharma',
+    'Media',
+    'Oil & Gas',
+    'Aerospace',
+];
 
 const sampleStocks: StockData[] = Array.from({ length: 50 }, (_, i) => ({
     id: i + 1,
@@ -1644,31 +1757,171 @@ const sampleStocks: StockData[] = Array.from({ length: 50 }, (_, i) => ({
 const stockColumns: SpreadsheetColumn<StockData>[] = [
     { id: 'ticker', label: 'Ticker', width: 80, sortable: true, filterable: true },
     { id: 'company', label: 'Company', width: 180, sortable: true, filterable: true },
-    { id: 'sector', label: 'Sector', width: 120, sortable: true, filterable: true, type: 'select', options: sectors },
+    {
+        id: 'sector',
+        label: 'Sector',
+        width: 120,
+        sortable: true,
+        filterable: true,
+        type: 'select',
+        options: sectors,
+    },
     { id: 'industry', label: 'Industry', width: 140, sortable: true, filterable: true },
-    { id: 'marketCap', label: 'Market Cap', width: 130, sortable: true, type: 'number', align: 'right', render: (v) => `$${(v / 1e9).toFixed(1)}B` },
-    { id: 'price', label: 'Price', width: 90, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
-    { id: 'change', label: 'Change', width: 90, sortable: true, type: 'number', align: 'right', render: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}` },
-    { id: 'changePercent', label: 'Change %', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}%` },
-    { id: 'volume', label: 'Volume', width: 110, sortable: true, type: 'number', align: 'right', render: (v) => `${(v / 1e6).toFixed(1)}M` },
-    { id: 'avgVolume', label: 'Avg Volume', width: 110, sortable: true, type: 'number', align: 'right', render: (v) => `${(v / 1e6).toFixed(1)}M` },
+    {
+        id: 'marketCap',
+        label: 'Market Cap',
+        width: 130,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `$${(v / 1e9).toFixed(1)}B`,
+    },
+    {
+        id: 'price',
+        label: 'Price',
+        width: 90,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `$${v.toFixed(2)}`,
+    },
+    {
+        id: 'change',
+        label: 'Change',
+        width: 90,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}`,
+    },
+    {
+        id: 'changePercent',
+        label: 'Change %',
+        width: 100,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}%`,
+    },
+    {
+        id: 'volume',
+        label: 'Volume',
+        width: 110,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `${(v / 1e6).toFixed(1)}M`,
+    },
+    {
+        id: 'avgVolume',
+        label: 'Avg Volume',
+        width: 110,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `${(v / 1e6).toFixed(1)}M`,
+    },
     { id: 'pe', label: 'P/E', width: 80, sortable: true, type: 'number', align: 'right' },
-    { id: 'eps', label: 'EPS', width: 80, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
-    { id: 'dividend', label: 'Dividend %', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `${v.toFixed(2)}%` },
+    {
+        id: 'eps',
+        label: 'EPS',
+        width: 80,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `$${v.toFixed(2)}`,
+    },
+    {
+        id: 'dividend',
+        label: 'Dividend %',
+        width: 100,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `${v.toFixed(2)}%`,
+    },
     { id: 'beta', label: 'Beta', width: 70, sortable: true, type: 'number', align: 'right' },
-    { id: 'week52High', label: '52W High', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
-    { id: 'week52Low', label: '52W Low', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
-    { id: 'revenue', label: 'Revenue', width: 120, sortable: true, type: 'number', align: 'right', render: (v) => `$${(v / 1e9).toFixed(1)}B` },
-    { id: 'profit', label: 'Net Income', width: 120, sortable: true, type: 'number', align: 'right', render: (v) => `$${(v / 1e9).toFixed(1)}B` },
+    {
+        id: 'week52High',
+        label: '52W High',
+        width: 100,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `$${v.toFixed(2)}`,
+    },
+    {
+        id: 'week52Low',
+        label: '52W Low',
+        width: 100,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `$${v.toFixed(2)}`,
+    },
+    {
+        id: 'revenue',
+        label: 'Revenue',
+        width: 120,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `$${(v / 1e9).toFixed(1)}B`,
+    },
+    {
+        id: 'profit',
+        label: 'Net Income',
+        width: 120,
+        sortable: true,
+        type: 'number',
+        align: 'right',
+        render: (v) => `$${(v / 1e9).toFixed(1)}B`,
+    },
 ];
 
 const stockColumnGroups: SpreadsheetColumnGroup[] = [
-    { id: 'identity', label: 'Identity', columns: ['ticker', 'company'], collapsible: true, headerColor: '#dbeafe' },
-    { id: 'classification', label: 'Classification', columns: ['sector', 'industry'], collapsible: true, headerColor: '#fef3c7' },
-    { id: 'market', label: 'Market Data', columns: ['marketCap', 'price', 'change', 'changePercent', 'volume', 'avgVolume'], collapsible: true, headerColor: '#d1fae5' },
-    { id: 'fundamentals', label: 'Fundamentals', columns: ['pe', 'eps', 'dividend', 'beta'], collapsible: true, headerColor: '#fce7f3' },
-    { id: 'range', label: '52-Week Range', columns: ['week52High', 'week52Low'], collapsible: true, headerColor: '#e0e7ff' },
-    { id: 'financials', label: 'Financials', columns: ['revenue', 'profit'], collapsible: true, headerColor: '#fef9c3' },
+    {
+        id: 'identity',
+        label: 'Identity',
+        columns: ['ticker', 'company'],
+        collapsible: true,
+        headerColor: '#dbeafe',
+    },
+    {
+        id: 'classification',
+        label: 'Classification',
+        columns: ['sector', 'industry'],
+        collapsible: true,
+        headerColor: '#fef3c7',
+    },
+    {
+        id: 'market',
+        label: 'Market Data',
+        columns: ['marketCap', 'price', 'change', 'changePercent', 'volume', 'avgVolume'],
+        collapsible: true,
+        headerColor: '#d1fae5',
+    },
+    {
+        id: 'fundamentals',
+        label: 'Fundamentals',
+        columns: ['pe', 'eps', 'dividend', 'beta'],
+        collapsible: true,
+        headerColor: '#fce7f3',
+    },
+    {
+        id: 'range',
+        label: '52-Week Range',
+        columns: ['week52High', 'week52Low'],
+        collapsible: true,
+        headerColor: '#e0e7ff',
+    },
+    {
+        id: 'financials',
+        label: 'Financials',
+        columns: ['revenue', 'profit'],
+        collapsible: true,
+        headerColor: '#fef9c3',
+    },
 ];
 
 export const PinnedColumnsWithGroups: Story = {
@@ -1686,10 +1939,17 @@ export const PinnedColumnsWithGroups: Story = {
                         columns.
                     </p>
                     <ul className="text-sm text-blue-700 space-y-1 ml-4 list-disc">
-                        <li><strong>Ticker & Company</strong> are pinned to the left</li>
-                        <li><strong>19 columns</strong> across 6 collapsible groups</li>
+                        <li>
+                            <strong>Ticker & Company</strong> are pinned to the left
+                        </li>
+                        <li>
+                            <strong>19 columns</strong> across 6 collapsible groups
+                        </li>
                         <li>Click the pin icon on any column header to pin/unpin</li>
-                        <li>Collapse groups to verify pinned columns from collapsed groups still work</li>
+                        <li>
+                            Collapse groups to verify pinned columns from collapsed groups still
+                            work
+                        </li>
                     </ul>
                 </div>
 

package/src/components/Spreadsheet.tsx

@@ -26,7 +26,12 @@ import { useSpreadsheetComments } from '../hooks/useSpreadsheetComments';
 import { useSpreadsheetUndoRedo } from '../hooks/useSpreadsheetUndoRedo';
 import { useSpreadsheetKeyboardShortcuts } from '../hooks/useSpreadsheetKeyboardShortcuts';
 import { useSpreadsheetSelection } from '../hooks/useSpreadsheetSelection';
-import type { CellEdit, SpreadsheetColumn, SpreadsheetColumnGroup, SpreadsheetProps } from '../types';
+import type {
+    CellEdit,
+    SpreadsheetColumn,
+    SpreadsheetColumnGroup,
+    SpreadsheetProps,
+} from '../types';
 
 type SingleCellEdit = {
     rowId: string | number;
@@ -645,7 +650,11 @@ export function Spreadsheet<T extends Record<string, any>>({
         }
 
         type ColumnItem = { type: 'column'; column: SpreadsheetColumn<T> };
-        type PlaceholderItem = { type: 'collapsed-placeholder'; groupId: string; headerColor?: string };
+        type PlaceholderItem = {
+            type: 'collapsed-placeholder';
+            groupId: string;
+            headerColor?: string;
+        };
         type RenderItem = ColumnItem | PlaceholderItem;
 
         const leftPinnedItems: ColumnItem[] = [];
@@ -683,9 +692,7 @@ export function Spreadsheet<T extends Record<string, any>>({
         }
 
         // Add any columns not in any group
-        const allGroupedIds = new Set(
-            columnGroups.flatMap((g) => g.columns)
-        );
+        const allGroupedIds = new Set(columnGroups.flatMap((g) => g.columns));
         for (const col of visibleColumns) {
             if (!allGroupedIds.has(col.id)) {
                 const pinSide = pinnedColumns.get(col.id);
@@ -842,7 +849,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                         zoom: zoom / 100,
                     }}
                 >
-                    <table className="w-full border-separate border-spacing-0 text-xs select-none">
+                    <table className="border-separate border-spacing-0 text-xs select-none">
                         <thead>
                             {/* Column Group Headers */}
                             {columnGroups && groupHeaderItems && (
@@ -859,9 +866,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                     />
                                     {groupHeaderItems.map((item) => {
                                         if (item.type === 'pinned-column') {
-                                            const col = columns.find(
-                                                (c) => c.id === item.columnId
-                                            );
+                                            const col = columns.find((c) => c.id === item.columnId);
                                             const isPinnedLeft = item.pinSide === 'left';
                                             return (
                                                 <th
@@ -872,8 +877,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                     )}
                                                     style={{
                                                         backgroundColor:
-                                                            item.headerColor ||
-                                                            'rgb(243 244 246)',
+                                                            item.headerColor || 'rgb(243 244 246)',
                                                         position: 'sticky',
                                                         left: isPinnedLeft
                                                             ? `${getColumnLeftOffset(item.columnId)}px`
@@ -881,12 +885,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                         right: !isPinnedLeft
                                                             ? `${getColumnRightOffset(item.columnId)}px`
                                                             : undefined,
-                                                        minWidth:
-                                                            col?.minWidth || col?.width,
-                                                        width:
-                                                            col?.minWidth || col?.width,
-                                                        maxWidth:
-                                                            col?.minWidth || col?.width,
+                                                        minWidth: col?.minWidth || col?.width,
                                                     }}
                                                 />
                                             );
@@ -947,8 +946,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                 className="border border-gray-200 px-2 py-1 text-center text-gray-400"
                                                 style={{
                                                     backgroundColor:
-                                                        item.headerColor ||
-                                                        'rgb(243 244 246)',
+                                                        item.headerColor || 'rgb(243 244 246)',
                                                     minWidth: '30px',
                                                 }}
                                             >

package/src/components/SpreadsheetCell.tsx

@@ -273,11 +273,6 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             style={{
                 backgroundColor: isInSelection ? 'rgb(239 246 255)' : getBackgroundColor(),
                 minWidth: column.minWidth || column.width,
-                // Pinned columns need fixed width so sticky offset calculations are accurate
-                ...(isPinned && {
-                    width: column.minWidth || column.width,
-                    maxWidth: column.minWidth || column.width,
-                }),
                 ...positionStyles,
                 ...selectionBorderStyles,
             }}

package/src/components/SpreadsheetHeader.tsx

@@ -71,11 +71,6 @@ export const SpreadsheetHeader: React.FC<
             style={{
                 backgroundColor: highlightColor || 'rgb(243 244 246)', // gray-100
                 minWidth: column.minWidth || column.width,
-                // Pinned columns need fixed width so sticky offset calculations are accurate
-                ...(isPinned && {
-                    width: column.minWidth || column.width,
-                    maxWidth: column.minWidth || column.width,
-                }),
                 top: 0, // For sticky header
                 ...positionStyles,
             }}