@alaarab/ogrid-react-fluent 2.1.8 → 2.1.9

package/dist/esm/index.css

@@ -623,6 +623,10 @@
 [data-drag-anchor] {
   background: var(--ogrid-bg, #fff) !important;
 }
+.DataGridTable_module_activeCellContent[data-drag-anchor],
+.DataGridTable_module_activeCellContent[data-drag-range] {
+  outline: none;
+}
 .DataGridTable_module_cellCut {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
   opacity: 0.7;
@@ -811,35 +815,106 @@
     transform: rotate(360deg);
   }
 }
-:root {
+:where(:root) {
   --ogrid-bg: #ffffff;
   --ogrid-fg: rgba(0, 0, 0, 0.87);
   --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
   --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
   --ogrid-border: rgba(0, 0, 0, 0.12);
-  --ogrid-header-bg: #f3f2f1;
+  --ogrid-border-strong: rgba(0, 0, 0, 0.5);
+  --ogrid-border-hover: rgba(0, 0, 0, 0.3);
+  --ogrid-header-bg: #f5f5f5;
   --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
   --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-bg-selected-hover: #dae8f8;
   --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
   --ogrid-range-bg: rgba(33, 115, 70, 0.12);
   --ogrid-accent: #0078d4;
+  --ogrid-accent-dark: #005a9e;
   --ogrid-selection-color: #217346;
+  --ogrid-primary: #0078d4;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #106ebe;
+  --ogrid-bg-subtle: #f5f5f5;
+  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
+  --ogrid-active-bg: rgba(0, 0, 0, 0.06);
+  --ogrid-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
   --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+  --ogrid-selection: #217346;
+  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
+  --ogrid-bg-selected: #e6f0fb;
+  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
+}
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme=light])) {
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+    --ogrid-border-hover: rgba(255, 255, 255, 0.3);
+    --ogrid-header-bg: #2c2c2c;
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-bg-selected-hover: #1f3650;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-accent-dark: #3390e0;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-primary: #4da6ff;
+    --ogrid-primary-fg: #fff;
+    --ogrid-primary-hover: #66b3ff;
+    --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
+    --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+    --ogrid-active-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+    --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    --ogrid-selection: #2ea043;
+    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-bg-selected: #1a3a5c;
+    --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
+  }
 }
-[data-theme=dark] {
-  --ogrid-bg: #1b1b1f;
+:where([data-theme=dark]) {
+  --ogrid-bg: #1e1e1e;
   --ogrid-fg: rgba(255, 255, 255, 0.87);
   --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
   --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
   --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+  --ogrid-border-hover: rgba(255, 255, 255, 0.3);
   --ogrid-header-bg: #2c2c2c;
-  --ogrid-hover-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
   --ogrid-selected-row-bg: #1a3a5c;
-  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.04);
-  --ogrid-range-bg: rgba(33, 115, 70, 0.2);
+  --ogrid-bg-selected-hover: #1f3650;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
   --ogrid-accent: #4da6ff;
-  --ogrid-selection-color: #217346;
-  --ogrid-loading-overlay: rgba(0, 0, 0, 0.5);
+  --ogrid-accent-dark: #3390e0;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-primary: #4da6ff;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #66b3ff;
+  --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
+  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+  --ogrid-active-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  --ogrid-selection: #2ea043;
+  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+  --ogrid-bg-selected: #1a3a5c;
+  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
 }
 .fui-FluentProvider {
   --ogrid-bg: var(--colorNeutralBackground1, #ffffff);

package/dist/esm/index.js

@@ -924,7 +924,8 @@ function DataGridTableInner(props) {
                 items,
                 visibleColumns,
                 columnSizingOverrides,
-                columnOrder
+                columnOrder,
+                isDragging
               }
             ),
             showEmptyInGrid && emptyState && /* @__PURE__ */ jsx(EmptyState, { emptyState })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.1.8"
+    "@alaarab/ogrid-react": "2.1.9"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",