@alaarab/ogrid-react-material 2.1.4 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js
CHANGED
|
@@ -8,6 +8,49 @@ import { FilterList, FirstPage, ChevronLeft, ChevronRight, LastPage, ExpandLess,
|
|
|
8
8
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
9
9
|
|
|
10
10
|
// src/OGrid/OGrid.tsx
|
|
11
|
+
|
|
12
|
+
// src/DataGridTable/DataGridTable.styles.ts
|
|
13
|
+
var STYLES = `
|
|
14
|
+
.ogrid-mat-row:hover > td { background-color: var(--ogrid-hover-bg); }
|
|
15
|
+
.ogrid-mat-row--selected > td { background-color: var(--ogrid-selection-bg, rgba(25, 118, 210, 0.08)); }
|
|
16
|
+
|
|
17
|
+
.ogrid-mat-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(224,224,224,1)); }
|
|
18
|
+
.ogrid-mat-td--pinned-left { position: sticky; left: 0; z-index: 6; background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-right: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: 2px 0 4px -1px rgba(0,0,0,0.1); }
|
|
19
|
+
.ogrid-mat-td--pinned-right { position: sticky; right: 0; z-index: 6; background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-left: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: -2px 0 4px -1px rgba(0,0,0,0.1); }
|
|
20
|
+
|
|
21
|
+
.ogrid-mat-cell { width: 100%; height: 100%; display: flex; align-items: center; min-width: 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none; }
|
|
22
|
+
.ogrid-mat-cell:focus-visible { outline: 2px solid var(--ogrid-primary, #1976d2); outline-offset: -2px; z-index: 3; }
|
|
23
|
+
|
|
24
|
+
.ogrid-mat-cell--numeric { justify-content: flex-end; text-align: right; }
|
|
25
|
+
.ogrid-mat-cell--boolean { justify-content: center; text-align: center; }
|
|
26
|
+
.ogrid-mat-cell--editable { cursor: cell; }
|
|
27
|
+
|
|
28
|
+
.ogrid-mat-cell--active { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; z-index: 2; position: relative; overflow: visible; background-color: var(--ogrid-hover-bg); }
|
|
29
|
+
.ogrid-mat-cell--active:focus-visible { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; }
|
|
30
|
+
.ogrid-mat-cell--range { background-color: var(--ogrid-bg-range, rgba(33,115,70,0.12)); }
|
|
31
|
+
.ogrid-mat-cell--range:focus-visible { outline: none; }
|
|
32
|
+
.ogrid-mat-cell--cut { background-color: var(--ogrid-hover-bg); opacity: 0.7; }
|
|
33
|
+
|
|
34
|
+
.ogrid-mat-fill-handle { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background-color: var(--ogrid-selection, #217346); border: 1px solid var(--ogrid-bg, #fff); border-radius: 1px; cursor: crosshair; pointer-events: auto; z-index: 3; }
|
|
35
|
+
|
|
36
|
+
.ogrid-mat-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }
|
|
37
|
+
|
|
38
|
+
.ogrid-mat-row-number { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary); background-color: var(--ogrid-hover-bg); position: sticky; z-index: 3; }
|
|
39
|
+
|
|
40
|
+
.ogrid-mat-tbody tr:last-child > td { border-bottom: none; }
|
|
41
|
+
|
|
42
|
+
.ogrid-mat-wrapper [data-drag-range] { background-color: rgba(33,115,70,0.12) !important; }
|
|
43
|
+
.ogrid-mat-wrapper [data-drag-anchor] { background-color: var(--ogrid-paper-bg, #fff) !important; }
|
|
44
|
+
`;
|
|
45
|
+
var injected = false;
|
|
46
|
+
function injectDataGridStyles() {
|
|
47
|
+
if (injected || typeof document === "undefined") return;
|
|
48
|
+
injected = true;
|
|
49
|
+
const style = document.createElement("style");
|
|
50
|
+
style.setAttribute("data-ogrid-mat", "");
|
|
51
|
+
style.textContent = STYLES;
|
|
52
|
+
document.head.appendChild(style);
|
|
53
|
+
}
|
|
11
54
|
var TextFilterPopover = ({
|
|
12
55
|
value,
|
|
13
56
|
onValueChange,
|
|
@@ -768,6 +811,7 @@ function GridRowInner(props) {
|
|
|
768
811
|
);
|
|
769
812
|
}
|
|
770
813
|
var GridRow = React3.memo(GridRowInner, areGridRowPropsEqual);
|
|
814
|
+
injectDataGridStyles();
|
|
771
815
|
function DataGridTableInner(props) {
|
|
772
816
|
const o = useDataGridTableOrchestration({ props });
|
|
773
817
|
const {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import './DataGridTable.css';
|
|
3
2
|
import type { IOGridDataGridProps } from '@alaarab/ogrid-react';
|
|
4
3
|
declare function DataGridTableInner<T>(props: IOGridDataGridProps<T>): React.ReactElement;
|
|
5
4
|
export declare const DataGridTable: typeof DataGridTableInner;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Self-injecting CSS for DataGridTable body cells.
|
|
3
|
+
* Uses native HTML elements with CSS classes instead of MUI sx prop,
|
|
4
|
+
* eliminating ~1000 Emotion resolutions per render.
|
|
5
|
+
* Injected once via <style> tag on first import.
|
|
6
|
+
*/
|
|
7
|
+
export declare function injectDataGridStyles(): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-react-material",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.5",
|
|
4
4
|
"description": "OGrid React Material implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"node": ">=18"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@alaarab/ogrid-react": "2.1.
|
|
42
|
+
"@alaarab/ogrid-react": "2.1.5"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@emotion/react": "^11.0.0",
|
package/dist/esm/index.css
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
/* src/DataGridTable/DataGridTable.css */
|
|
2
|
-
.ogrid-mat-row:hover > td {
|
|
3
|
-
background-color: var(--ogrid-hover-bg);
|
|
4
|
-
}
|
|
5
|
-
.ogrid-mat-row--selected > td {
|
|
6
|
-
background-color: var(--ogrid-selection-bg, rgba(25, 118, 210, 0.08));
|
|
7
|
-
}
|
|
8
|
-
.ogrid-mat-td {
|
|
9
|
-
position: relative;
|
|
10
|
-
padding: 0;
|
|
11
|
-
height: 1px;
|
|
12
|
-
border-bottom: 1px solid var(--ogrid-border, rgba(224, 224, 224, 1));
|
|
13
|
-
}
|
|
14
|
-
.ogrid-mat-td--pinned-left {
|
|
15
|
-
position: sticky;
|
|
16
|
-
left: 0;
|
|
17
|
-
z-index: 6;
|
|
18
|
-
background-color: var(--ogrid-paper-bg, #fff);
|
|
19
|
-
will-change: transform;
|
|
20
|
-
border-right: 1px solid var(--ogrid-border, rgba(224, 224, 224, 1));
|
|
21
|
-
box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
|
|
22
|
-
}
|
|
23
|
-
.ogrid-mat-td--pinned-right {
|
|
24
|
-
position: sticky;
|
|
25
|
-
right: 0;
|
|
26
|
-
z-index: 6;
|
|
27
|
-
background-color: var(--ogrid-paper-bg, #fff);
|
|
28
|
-
will-change: transform;
|
|
29
|
-
border-left: 1px solid var(--ogrid-border, rgba(224, 224, 224, 1));
|
|
30
|
-
box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
|
|
31
|
-
}
|
|
32
|
-
.ogrid-mat-cell {
|
|
33
|
-
width: 100%;
|
|
34
|
-
height: 100%;
|
|
35
|
-
display: flex;
|
|
36
|
-
align-items: center;
|
|
37
|
-
min-width: 0;
|
|
38
|
-
box-sizing: border-box;
|
|
39
|
-
overflow: hidden;
|
|
40
|
-
text-overflow: ellipsis;
|
|
41
|
-
white-space: nowrap;
|
|
42
|
-
user-select: none;
|
|
43
|
-
outline: none;
|
|
44
|
-
}
|
|
45
|
-
.ogrid-mat-cell:focus-visible {
|
|
46
|
-
outline: 2px solid var(--ogrid-primary, #1976d2);
|
|
47
|
-
outline-offset: -2px;
|
|
48
|
-
z-index: 3;
|
|
49
|
-
}
|
|
50
|
-
.ogrid-mat-cell--numeric {
|
|
51
|
-
justify-content: flex-end;
|
|
52
|
-
text-align: right;
|
|
53
|
-
}
|
|
54
|
-
.ogrid-mat-cell--boolean {
|
|
55
|
-
justify-content: center;
|
|
56
|
-
text-align: center;
|
|
57
|
-
}
|
|
58
|
-
.ogrid-mat-cell--editable {
|
|
59
|
-
cursor: cell;
|
|
60
|
-
}
|
|
61
|
-
.ogrid-mat-cell--active {
|
|
62
|
-
outline: 2px solid var(--ogrid-selection, #217346);
|
|
63
|
-
outline-offset: -1px;
|
|
64
|
-
z-index: 2;
|
|
65
|
-
position: relative;
|
|
66
|
-
overflow: visible;
|
|
67
|
-
background-color: var(--ogrid-hover-bg);
|
|
68
|
-
}
|
|
69
|
-
.ogrid-mat-cell--active:focus-visible {
|
|
70
|
-
outline: 2px solid var(--ogrid-selection, #217346);
|
|
71
|
-
outline-offset: -1px;
|
|
72
|
-
}
|
|
73
|
-
.ogrid-mat-cell--range {
|
|
74
|
-
background-color: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12));
|
|
75
|
-
}
|
|
76
|
-
.ogrid-mat-cell--range:focus-visible {
|
|
77
|
-
outline: none;
|
|
78
|
-
}
|
|
79
|
-
.ogrid-mat-cell--cut {
|
|
80
|
-
background-color: var(--ogrid-hover-bg);
|
|
81
|
-
opacity: 0.7;
|
|
82
|
-
}
|
|
83
|
-
.ogrid-mat-fill-handle {
|
|
84
|
-
position: absolute;
|
|
85
|
-
right: -3px;
|
|
86
|
-
bottom: -3px;
|
|
87
|
-
width: 7px;
|
|
88
|
-
height: 7px;
|
|
89
|
-
background-color: var(--ogrid-selection, #217346);
|
|
90
|
-
border: 1px solid var(--ogrid-bg, #fff);
|
|
91
|
-
border-radius: 1px;
|
|
92
|
-
cursor: crosshair;
|
|
93
|
-
pointer-events: auto;
|
|
94
|
-
z-index: 3;
|
|
95
|
-
}
|
|
96
|
-
.ogrid-mat-checkbox-wrapper {
|
|
97
|
-
display: flex;
|
|
98
|
-
align-items: center;
|
|
99
|
-
justify-content: center;
|
|
100
|
-
}
|
|
101
|
-
.ogrid-mat-row-number {
|
|
102
|
-
text-align: center;
|
|
103
|
-
font-weight: 600;
|
|
104
|
-
font-variant-numeric: tabular-nums;
|
|
105
|
-
color: var(--ogrid-fg-secondary);
|
|
106
|
-
background-color: var(--ogrid-hover-bg);
|
|
107
|
-
position: sticky;
|
|
108
|
-
z-index: 3;
|
|
109
|
-
}
|
|
110
|
-
.ogrid-mat-tbody tr:last-child > td {
|
|
111
|
-
border-bottom: none;
|
|
112
|
-
}
|
|
113
|
-
.ogrid-mat-wrapper [data-drag-range] {
|
|
114
|
-
background-color: rgba(33, 115, 70, 0.12) !important;
|
|
115
|
-
}
|
|
116
|
-
.ogrid-mat-wrapper [data-drag-anchor] {
|
|
117
|
-
background-color: var(--ogrid-paper-bg, #fff) !important;
|
|
118
|
-
}
|