react-open-source-grid 1.5.4 → 1.5.8

package/README.md

@@ -41,8 +41,8 @@ Open http://localhost:5173 to see the demo.
 ## Usage
 
 ```tsx
-import { DataGrid } from './components/DataGrid';
-import type { Column, Row } from './components/DataGrid';
+import { DataGrid } from 'react-open-source-grid';
+import type { Column, Row } from 'react-open-source-grid';
 
 const columns: Column[] = [
   { field: 'id', headerName: 'ID', width: 70 },
@@ -170,7 +170,7 @@ export default defineConfig([
 For large datasets (50,000+ rows, 200+ columns), enable virtual scrolling:
 
 ```tsx
-import { DataGrid, VirtualScrollConfig } from './components/DataGrid';
+import { DataGrid, VirtualScrollConfig } from 'react-open-source-grid';
 
 const virtualConfig: VirtualScrollConfig = {
   enabled: true,
@@ -202,7 +202,7 @@ const virtualConfig: VirtualScrollConfig = {
 For massive datasets (100M+ rows), use server-side infinite scrolling:
 
 ```tsx
-import { InfiniteScrollDataGrid, ServerSideDataSource } from './components/DataGrid';
+import { InfiniteScrollDataGrid, ServerSideDataSource } from 'react-open-source-grid';
 
 // Create data source
 const dataSource = new ServerSideDataSource({
@@ -269,7 +269,7 @@ Response:
 Choose from **10 beautiful pre-built themes** to match your application's design:
 
 ```tsx
-import { DataGrid, ThemeSelector } from './components/DataGrid';
+import { DataGrid, ThemeSelector } from 'react-open-source-grid';
 import type { ThemeName } from './components/DataGrid/themes';
 
 function App() {

package/dist/lib/components/DemoGridPage.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
+import 'react-open-source-grid/dist/lib/index.css';
 export declare const DemoGridPage: React.FC;

package/dist/lib/index.css

@@ -1,3 +1,129 @@
+/* src/index.css */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+body {
+  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;
+  color: #333333;
+  background-color: #fafafa;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+}
+:root {
+  --color-primary: #0066cc;
+  --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: #666666;
+  --grid-border: #e5e7eb;
+  --grid-border-width: 1px;
+  --grid-border-radius: 6px;
+  --grid-bg: #ffffff;
+  --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: rgba(59, 130, 246, 0.08);
+  --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 rgba(0, 0, 0, 0.08);
+  --grid-text-inverse: #ffffff;
+}
+::-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-radius: 6px;
+  border: 2px solid #f1f1f1;
+}
+.virtual-scroller-container::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
 /* src/components/DataGrid/ContextMenu.css */
 .context-menu {
   position: fixed;

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
+import './index.css';
 export * from './components/DataGrid/index';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-open-source-grid",
   "private": false,
-  "version": "1.5.4",
+  "version": "1.5.8",
   "type": "module",
   "description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, and more",
   "main": "./dist/lib/index.cjs",
   "module": "./dist/lib/index.js",
   "types": "./dist/lib/index.d.ts",
+  "style": "./dist/lib/index.css",
   "exports": {
     ".": {
       "types": "./dist/lib/index.d.ts",
@@ -15,7 +16,10 @@
       "browser": "./dist/lib/index.js",
       "default": "./dist/lib/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*",
+    "./dist/assets/*": "./dist/assets/*",
+    "./dist/assets/components/*": "./dist/assets/components/*"
   },
   "files": [
     "dist",