react-open-source-grid 1.0.0 → 1.0.2

package/README.md

@@ -21,6 +21,8 @@ A fully-featured, reusable DataGrid component built with React, TypeScript, and
 - ✅ **Cell Renderer Framework** (custom components: badges, progress bars, buttons, images, icons)
 - ✅ **Layout Persistence** (save/load layouts with localStorage, server, or user profile storage)
 - ✅ **Infinite Scrolling with Server-Side DataSource** (100M+ rows with server-side filtering, sorting, and caching)
+- ✅ **Accessibility (A11y)** (WCAG 2.1 AA compliant with full keyboard navigation, ARIA support, and screen reader compatibility)
+- ✅ **Context Menu** (right-click menu with copy, export, pin/unpin, auto-size, hide, filter by value, and custom actions)
 
 ## Quick Start
 
@@ -68,9 +70,11 @@ const rows: Row[] = [
 - **Footer Quick Reference**: See [FOOTER_QUICK_REFERENCE.md](./FOOTER_QUICK_REFERENCE.md)
 - **Cell Renderer Framework**: See [CELL_RENDERER_FRAMEWORK.md](./CELL_RENDERER_FRAMEWORK.md)
 - **Cell Renderer Quick Reference**: See [CELL_RENDERER_QUICK_REF.md](./CELL_RENDERER_QUICK_REF.md)
-- **Layout Persistence**: See [LAYOUT_PERSISTENCE_INDEX.md](./LAYOUT_PERSISTENCE_INDEX.md) 🆕
+- **Layout Persistence**: See [LAYOUT_PERSISTENCE_INDEX.md](./LAYOUT_PERSISTENCE_INDEX.md)
 - **Layout Persistence Feature Guide**: See [LAYOUT_PERSISTENCE_FEATURE.md](./LAYOUT_PERSISTENCE_FEATURE.md)
 - **Layout Persistence Quick Reference**: See [LAYOUT_PERSISTENCE_QUICK_REF.md](./LAYOUT_PERSISTENCE_QUICK_REF.md)
+- **Context Menu**: See [CONTEXT_MENU_FEATURE.md](./CONTEXT_MENU_FEATURE.md) 🆕
+- **Context Menu Quick Reference**: See [CONTEXT_MENU_QUICK_REF.md](./CONTEXT_MENU_QUICK_REF.md)
 
 ## Technology Stack
 

package/dist/assets/index-DcgPHqjq.css

@@ -0,0 +1 @@
+*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fafafa;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.6}input,button,textarea,select{font-family:inherit;font-size:inherit}button{cursor:pointer;background:0 0;border:none;margin:0;padding:0}@tailwind base;@tailwind components;@tailwind utilities;:root{--color-primary:#06c;--color-primary-light:#e8f0ff;--color-primary-dark:#004ca3;--color-neutral-dark:#1a1a1a;--color-neutral-light:#f5f5f5;--color-border:#d9d9d9;--color-border-light:#efefef;--color-bg-hover:#f0f0f0;--color-text-primary:#262626;--color-text-secondary:#666;--grid-border:#e5e7eb;--grid-border-width:1px;--grid-border-radius:6px;--grid-bg:#fff;--grid-bg-alt:#f9fafb;--grid-header-bg:#f3f4f6;--grid-footer-bg:#f9fafb;--grid-text:#111827;--grid-text-secondary:#6b7280;--grid-text-muted:#9ca3af;--grid-header-text:#374151;--grid-primary:#3b82f6;--grid-selected:#3b82f614;--grid-hover:#f9fafb;--grid-active:#eff6ff;--grid-cell-padding:10px 12px;--grid-header-padding:10px 12px;--grid-font-size:13px;--grid-font-size-sm:12px;--grid-header-font-weight:600;--grid-shadow-light:0 1px 3px 0 #00000014;--grid-text-inverse:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.virtual-scroller-container{scrollbar-width:thin;scrollbar-color:#c1c1c1 #f1f1f1}.virtual-scroller-container::-webkit-scrollbar{-webkit-appearance:none;width:12px;height:12px}.virtual-scroller-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0}.virtual-scroller-container::-webkit-scrollbar-thumb{background:#c1c1c1;border:2px solid #f1f1f1;border-radius:6px}.virtual-scroller-container::-webkit-scrollbar-thumb:hover{background:#a1a1a1}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.context-menu{background:var(--context-menu-bg,#fff);border:1px solid var(--context-menu-border,#d0d0d0);z-index:10000;min-width:200px;max-width:320px;color:var(--context-menu-text,#333);-webkit-user-select:none;user-select:none;border-radius:6px;padding:4px 0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5;animation:.12s ease-out contextMenuFadeIn;position:fixed;box-shadow:0 4px 16px #00000026}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{cursor:pointer;align-items:center;gap:8px;padding:8px 12px;transition:background-color .1s;display:flex;position:relative}.context-menu-item:hover:not(.disabled){background-color:var(--context-menu-hover-bg,#f0f0f0)}.context-menu-item:active:not(.disabled){background-color:var(--context-menu-active-bg,#e5e5e5)}.context-menu-item.disabled{opacity:.4;cursor:not-allowed}.context-menu-item.danger{color:var(--context-menu-danger,#dc3545)}.context-menu-item.danger:hover:not(.disabled){background-color:var(--context-menu-danger-hover-bg,#fff0f0)}.context-menu-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;font-size:16px;display:flex}.context-menu-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.context-menu-shortcut{color:var(--context-menu-shortcut,#888);margin-left:auto;padding-left:16px;font-size:12px}.context-menu-arrow{color:var(--context-menu-arrow,#888);margin-left:auto;font-size:10px}.context-menu-separator{background-color:var(--context-menu-separator,#e0e0e0);height:1px;margin:4px 0}@media (prefers-color-scheme:dark){.context-menu{--context-menu-bg:#2a2a2a;--context-menu-border:#404040;--context-menu-text:#e0e0e0;--context-menu-hover-bg:#3a3a3a;--context-menu-active-bg:#4a4a4a;--context-menu-separator:#404040;--context-menu-shortcut:#999;--context-menu-arrow:#999;--context-menu-danger:#ff6b6b;--context-menu-danger-hover-bg:#3a2a2a}}.data-grid.theme-quartz .context-menu{--context-menu-bg:#fff;--context-menu-border:#c5c5c5;--context-menu-text:#000;--context-menu-hover-bg:#e6f2ff;--context-menu-active-bg:#cce5ff}.data-grid.theme-alpine .context-menu{--context-menu-bg:#f8f9fa;--context-menu-border:#dee2e6;--context-menu-text:#212529;--context-menu-hover-bg:#e9ecef;--context-menu-active-bg:#dee2e6}.data-grid.theme-balham .context-menu{--context-menu-bg:#fff;--context-menu-border:#bdc3c7;--context-menu-text:#2c3e50;--context-menu-hover-bg:#ecf0f1;--context-menu-active-bg:#d5dbdb}.data-grid.theme-material .context-menu{--context-menu-bg:#fff;--context-menu-border:#e0e0e0;--context-menu-text:#212121;--context-menu-hover-bg:#f5f5f5;--context-menu-active-bg:#eee;border-radius:4px;box-shadow:0 2px 4px #0003}.context-menu-item:focus{outline:2px solid var(--context-menu-focus,#06c);outline-offset:-2px}.context-menu-item:focus:not(:focus-visible){outline:none}.market-data-grid{background:#fff;border:1px solid #e0e0e0;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:13px;overflow:auto}.market-grid-header{z-index:10;background:#f5f5f5;border-bottom:2px solid #d0d0d0;position:sticky;top:0}.market-grid-header-row{min-width:100%;display:flex}.market-grid-header-cell{color:#333;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;border-right:1px solid #e0e0e0;padding:10px 12px;font-weight:600;overflow:hidden}.market-grid-header-cell:last-child{border-right:none}.market-grid-body{min-width:100%}.market-grid-row{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .1s;display:flex}.market-grid-row:hover{background-color:#f9f9f9}.market-grid-row:active{background-color:#f0f0f0}.market-grid-cell{white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #f5f5f5;align-items:center;padding:8px 12px;display:flex;position:relative;overflow:hidden}.market-grid-cell:last-child{border-right:none}.numeric-cell{font-variant-numeric:tabular-nums;justify-content:flex-end;font-family:Monaco,Menlo,Consolas,monospace}@keyframes flashUp{0%{background-color:#4caf5000}20%{background-color:#4caf5066}to{background-color:#4caf5000}}@keyframes flashDown{0%{background-color:#f4433600}20%{background-color:#f4433666}to{background-color:#f4433600}}.cell-flash-up{animation:.5s ease-out flashUp}.cell-flash-down{animation:.5s ease-out flashDown}.change-positive{color:#4caf50;font-weight:600}.change-negative{color:#f44336;font-weight:600}.market-grid-cell[data-field=bid]{color:#2196f3;font-weight:500}.market-grid-cell[data-field=ask]{color:#ff5722;font-weight:500}.market-grid-cell[data-field=price]{font-size:14px;font-weight:700}.market-grid-cell[data-field=volume],.market-grid-cell[data-field=size]{color:#666;font-size:12px}.market-grid-cell[data-field=symbol],.market-grid-cell[data-field=id]{color:#1976d2;font-family:Monaco,Menlo,Consolas,monospace;font-weight:700}.density-compact .market-grid-header-cell{padding:6px 8px;font-size:12px}.density-compact .market-grid-cell{padding:4px 8px;font-size:12px}.density-compact .market-grid-cell[data-field=price]{font-size:13px}.density-compact .market-grid-row{min-height:28px}.market-grid-cell[data-field=high]{color:#4caf50}.market-grid-cell[data-field=low]{color:#f44336}.market-data-grid.loading{opacity:.6;pointer-events:none}.market-data-grid.loading:after{content:"";border:4px solid #f3f3f3;border-top-color:#2196f3;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.market-data-grid.paused{border:2px solid #ff9800}.market-data-grid.paused:before{content:"PAUSED";color:#fff;z-index:1000;letter-spacing:1px;background:#ff9800;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:700;position:absolute;top:10px;right:10px}.market-data-grid.throttled{border:2px solid #f44336}.market-data-grid.throttled:before{content:"THROTTLED";color:#fff;z-index:1000;letter-spacing:1px;background:#f44336;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:700;position:absolute;top:10px;right:10px}.market-data-grid::-webkit-scrollbar{width:12px;height:12px}.market-data-grid::-webkit-scrollbar-track{background:#f5f5f5}.market-data-grid::-webkit-scrollbar-thumb{background:#ccc;border-radius:6px}.market-data-grid::-webkit-scrollbar-thumb:hover{background:#999}.market-data-wrapper{width:100%;height:100%;position:relative}.market-metrics-overlay{color:#0f0;z-index:1000;pointer-events:none;background:#000000bf;border-radius:4px;padding:8px 12px;font-family:Monaco,Menlo,Consolas,monospace;font-size:11px;line-height:1.6;position:absolute;top:10px;left:10px}.market-metrics-overlay .metric{justify-content:space-between;gap:12px;display:flex}.market-metrics-overlay .metric-label{color:#888}.market-metrics-overlay .metric-value{color:#0f0;font-weight:700}.market-metrics-overlay .metric-value.warning{color:#ff9800}.market-metrics-overlay .metric-value.critical{color:#f44336}.connection-status{z-index:1000;letter-spacing:.5px;border-radius:12px;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;top:10px;right:120px}.connection-status.connected{color:#fff;background:#4caf50}.connection-status.connecting{color:#fff;background:#ff9800}.connection-status.disconnected{color:#fff;background:#f44336}.connection-status.reconnecting{color:#fff;background:#ff9800;animation:1s ease-in-out infinite pulse}@media (max-width:768px){.market-data-grid{font-size:11px}.market-grid-cell{padding:6px 8px}.market-grid-header-cell{padding:8px}}.live-market-demo{background:#fafafa;flex-direction:column;max-width:100%;height:100vh;padding:20px;display:flex}.demo-header{margin-bottom:20px}.demo-header h1{color:#1976d2;margin:0 0 8px;font-size:28px;font-weight:700}.demo-description{color:#666;margin:0;font-size:14px}.demo-controls{background:#fff;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:16px;display:flex;box-shadow:0 2px 4px #0000001a}.control-group{flex-wrap:wrap;gap:12px;display:flex}.control-btn{cursor:pointer;white-space:nowrap;background:#fff;border:2px solid #e0e0e0;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.control-btn:hover{background:#f5f9ff;border-color:#2196f3}.control-btn.active{color:#fff;background:#2196f3;border-color:#2196f3}.control-btn.paused{color:#fff;background:#ff9800;border-color:#ff9800}.connection-info{align-items:center;gap:12px;display:flex}.status-badge{letter-spacing:.5px;border-radius:16px;padding:6px 14px;font-size:11px;font-weight:700}.status-badge.connected{color:#fff;background:#4caf50}.status-badge.connecting{color:#fff;background:#ff9800}.status-badge.disconnected{color:#fff;background:#f44336}.status-badge.reconnecting{color:#fff;background:#ff9800;animation:1s ease-in-out infinite pulse-badge}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.metric-badge{color:#1976d2;background:#e3f2fd;border-radius:4px;padding:6px 12px;font-size:13px;font-weight:600}.metrics-panel{background:#000000d9;border-radius:6px;flex-wrap:wrap;gap:20px;margin-bottom:16px;padding:12px 16px;display:flex}.metric-item{align-items:center;gap:8px;display:flex}.metric-label{color:#888;font-size:13px;font-weight:500}.metric-value{color:#0f0;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;font-weight:700}.metric-value.warning{color:#ff9800}.metric-value.critical{color:#f44336}.metric-item.warning{background:#ff980033;border-radius:4px;padding:4px 12px}.grid-container{background:#fff;border-radius:8px;flex:1;min-height:600px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.grid-container.paused{border:3px solid #ff9800}.grid-container.throttled{border:3px solid #f44336}.grid-container.paused:before{content:"PAUSED";color:#fff;z-index:1000;letter-spacing:1px;background:#ff9800;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;position:absolute;top:16px;right:16px;box-shadow:0 2px 6px #0003}.grid-container.throttled:after{content:"CPU THROTTLED";color:#fff;z-index:1000;letter-spacing:1px;background:#f44336;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700;animation:1s ease-in-out infinite pulse-warning;position:absolute;top:56px;right:16px;box-shadow:0 2px 6px #0003}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}.demo-footer{background:#fff;border-radius:8px;margin-top:16px;padding:16px;box-shadow:0 2px 4px #0000001a}.demo-footer p{color:#666;margin:0;font-size:13px;line-height:1.6}.demo-footer strong{color:#333}@media (max-width:1024px){.demo-controls{flex-direction:column;align-items:stretch}.connection-info,.metrics-panel{justify-content:center}}@media (max-width:768px){.live-market-demo{padding:12px}.demo-header h1{font-size:22px}.control-btn{padding:8px 16px;font-size:13px}.metrics-panel{font-size:12px}}#root{width:100%;height:100%}.btn-primary{color:#fff;cursor:pointer;background-color:#06c;border:none;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary:hover{background-color:#0052a3;box-shadow:0 2px 8px #06c3}.btn-primary:active{background-color:#003d7a;transform:translateY(1px)}.btn-secondary{color:#262626;cursor:pointer;background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-secondary:hover{background-color:#f5f5f5;border-color:#bfbfbf}.datagrid-container{background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px #00000014}.datagrid-toolbar{background-color:#fafafa;border-bottom:1px solid #efefef;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.datagrid-toolbar-title{color:#262626;font-size:14px;font-weight:600}.filter-input{border:1px solid #d9d9d9;border-radius:4px;padding:6px 12px;font-size:14px;transition:all .2s}.filter-input:focus{border-color:#06c;outline:none;box-shadow:0 0 0 3px #0066cc1a}.loading-state{color:#8c8c8c;justify-content:center;align-items:center;height:400px;font-size:14px;display:flex}@media (max-width:768px){.datagrid-toolbar{flex-direction:column;align-items:flex-start}}