@azrico/reactgrid 1.6.11 → 1.6.12

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.
Files changed (4) hide show
  1. package/config/theme-extras.css +121 -120
  2. package/dist/src/themes/azgrid-theme.css +121 -120
  3. package/package.json +1 -1
  4. package/src/themes/azgrid-theme.css +121 -120
package/config/theme-extras.css CHANGED
@@ -1,120 +1,121 @@
1
- /* Keep the menu row in its hover state while the pointer is in the portaled menu.
2
- * Match the strongest selected-row :hover selectors, including their cells. */
3
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
4
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
5
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
6
- background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
7
- color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
8
- }
9
-
10
- /* Additional surfaces and typography not assigned colours by Inovua. */
11
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
12
- background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
13
- }
14
- .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
15
- .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
16
- background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
17
- color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
18
- }
19
- .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
20
- .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
21
- fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
22
- }
23
- .azgrid.InovuaReactDataGrid {
24
- background: var(--azgrid-bg, var(--azgrid-preset-bg));
25
- color: var(--azgrid-fg, var(--azgrid-preset-fg));
26
- border-color: var(--azgrid-border, var(--azgrid-preset-border));
27
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
28
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
29
- }
30
- .azgrid .InovuaReactDataGrid__column-header__content,
31
- .azgrid .InovuaReactDataGrid__header-group__title {
32
- color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
33
- font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
34
- font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
35
- text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
36
- letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
37
- }
38
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
39
- border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
40
- }
41
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
42
- /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
43
- border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
44
- }
45
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
46
- padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
47
- }
48
- .azgrid .InovuaReactDataGrid__empty-wrapper {
49
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
50
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
51
- }
52
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
53
- background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
54
- }
55
- .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
56
- .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
57
- box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
58
- }
59
- .azgrid-scope input,
60
- .azgrid-scope select,
61
- .azgrid-scope .azgrid-searcharea {
62
- color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
63
- background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
64
- border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
65
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
66
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
67
- }
68
- .azgrid-scope input::placeholder {
69
- color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
70
- }
71
- .azgrid-scope input:focus-visible,
72
- .azgrid-scope select:focus-visible {
73
- outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
74
- }
75
- .azgrid-scope .inovua-react-pagination-toolbar input,
76
- .azgrid-scope .inovua-react-pagination-toolbar select {
77
- background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
78
- color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
79
- border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
80
- }
81
- .azgrid-scope .inovua-react-toolkit-text-input,
82
- .azgrid-scope .inovua-react-toolkit-combo-box,
83
- .azgrid-scope .inovua-react-toolkit-menu {
84
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
85
- }
86
- /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
87
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
88
- * Two classes exceed @azrico/controls' single-class menu rules. */
89
- .azgrid-context-menu.azrico-controls-contextmenu {
90
- --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
91
- --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
92
- --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
93
- --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
94
- --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
95
- --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
96
- --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
97
- border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
98
- }
99
- .azgrid-scope, .azgrid-scope * {
100
- accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
101
- scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
102
- }
103
- .azgrid-scope ::-webkit-scrollbar-track {
104
- background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
105
- }
106
- .azgrid-scope ::-webkit-scrollbar-thumb {
107
- background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
108
- }
109
- /* The grid draws its own scrollbars and pushes the native one out of view by a
110
- fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
111
- scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
112
- .azgrid-scope .inovua-react-scroll-container__wrapper > div {
113
- scrollbar-width: none;
114
- }
115
- .azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
116
- display: none;
117
- }
118
- .azgrid .InovuaReactDataGrid__row.deleted:after {
119
- border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
120
- }
1
+ /* Keep the menu row in its hover state while the pointer is in the portaled menu.
2
+ * Match the strongest selected-row :hover selectors, including their cells. */
3
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
4
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
5
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
6
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
7
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
8
+ }
9
+
10
+ /* Additional surfaces and typography not assigned colours by Inovua. */
11
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
12
+ background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
13
+ }
14
+ .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
15
+ .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
16
+ background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
17
+ color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
18
+ }
19
+ .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
20
+ .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
21
+ fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
22
+ }
23
+ .azgrid.InovuaReactDataGrid {
24
+ background: var(--azgrid-bg, var(--azgrid-preset-bg));
25
+ color: var(--azgrid-fg, var(--azgrid-preset-fg));
26
+ border-color: var(--azgrid-border, var(--azgrid-preset-border));
27
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
28
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
29
+ }
30
+ .azgrid .InovuaReactDataGrid__column-header__content,
31
+ .azgrid .InovuaReactDataGrid__header-group__title {
32
+ color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
33
+ font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
34
+ font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
35
+ text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
36
+ letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
37
+ }
38
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
39
+ border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
40
+ }
41
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
42
+ /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
43
+ border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
44
+ }
45
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
46
+ padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
47
+ }
48
+ .azgrid .InovuaReactDataGrid__empty-wrapper {
49
+ background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
50
+ color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
51
+ }
52
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
53
+ background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
54
+ }
55
+ .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
56
+ .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
57
+ box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
58
+ }
59
+ .azgrid-scope input,
60
+ .azgrid-scope select,
61
+ .azgrid-scope .azgrid-searcharea {
62
+ color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
63
+ background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
64
+ border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
65
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
66
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
67
+ }
68
+ .azgrid-scope input::placeholder {
69
+ color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
70
+ }
71
+ .azgrid-scope input:focus-visible,
72
+ .azgrid-scope select:focus-visible {
73
+ outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
74
+ }
75
+ .azgrid-scope .inovua-react-pagination-toolbar input,
76
+ .azgrid-scope .inovua-react-pagination-toolbar select {
77
+ background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
78
+ color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
79
+ border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
80
+ }
81
+ .azgrid-scope .inovua-react-toolkit-text-input,
82
+ .azgrid-scope .inovua-react-toolkit-combo-box,
83
+ .azgrid-scope .inovua-react-toolkit-menu {
84
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
85
+ }
86
+ /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
87
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
88
+ * Two classes exceed @azrico/controls' single-class menu rules. */
89
+ .azgrid-context-menu.azrico-controls-contextmenu {
90
+ --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
91
+ --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
92
+ --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
93
+ --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
94
+ --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
95
+ --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
96
+ --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
97
+ border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
98
+ }
99
+ .azgrid-scope, .azgrid-scope * {
100
+ accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
101
+ scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
102
+ }
103
+ .azgrid-scope ::-webkit-scrollbar-track {
104
+ background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
105
+ }
106
+ .azgrid-scope ::-webkit-scrollbar-thumb {
107
+ background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
108
+ }
109
+ /* The grid draws its own scrollbars and pushes the native one out of view by a
110
+ fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
111
+ scrollbar, which then overlaps the last pixels of the viewport. Hide it only
112
+ in the row viewport; toolbars need the native scrollbar for correct sizing. */
113
+ .azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div {
114
+ scrollbar-width: none;
115
+ }
116
+ .azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
117
+ display: none;
118
+ }
119
+ .azgrid .InovuaReactDataGrid__row.deleted:after {
120
+ border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
121
+ }
package/dist/src/themes/azgrid-theme.css CHANGED
@@ -1934,123 +1934,124 @@
1934
1934
  fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1935
1935
  }
1936
1936
 
1937
- /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
- * Match the strongest selected-row :hover selectors, including their cells. */
1939
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
- background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
- color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
- }
1945
-
1946
- /* Additional surfaces and typography not assigned colours by Inovua. */
1947
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
- background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
- }
1950
- .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
- .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
- background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
- color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
- }
1955
- .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
- .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
- fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
- }
1959
- .azgrid.InovuaReactDataGrid {
1960
- background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
- color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
- border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
- }
1966
- .azgrid .InovuaReactDataGrid__column-header__content,
1967
- .azgrid .InovuaReactDataGrid__header-group__title {
1968
- color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
- font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
- font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
- text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
- letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
- }
1974
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
- border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
- }
1977
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
- /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
- border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
- }
1981
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
- padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
- }
1984
- .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
- }
1988
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
- background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
- }
1991
- .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
- .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
- box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
- }
1995
- .azgrid-scope input,
1996
- .azgrid-scope select,
1997
- .azgrid-scope .azgrid-searcharea {
1998
- color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
- background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
- border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
- }
2004
- .azgrid-scope input::placeholder {
2005
- color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
- }
2007
- .azgrid-scope input:focus-visible,
2008
- .azgrid-scope select:focus-visible {
2009
- outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
- }
2011
- .azgrid-scope .inovua-react-pagination-toolbar input,
2012
- .azgrid-scope .inovua-react-pagination-toolbar select {
2013
- background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
- color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
- border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
- }
2017
- .azgrid-scope .inovua-react-toolkit-text-input,
2018
- .azgrid-scope .inovua-react-toolkit-combo-box,
2019
- .azgrid-scope .inovua-react-toolkit-menu {
2020
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
- }
2022
- /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
- * Two classes exceed @azrico/controls' single-class menu rules. */
2025
- .azgrid-context-menu.azrico-controls-contextmenu {
2026
- --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
- --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
- --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
- --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
- --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
- --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
- --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
- border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
- }
2035
- .azgrid-scope, .azgrid-scope * {
2036
- accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
- scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
- }
2039
- .azgrid-scope ::-webkit-scrollbar-track {
2040
- background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
- }
2042
- .azgrid-scope ::-webkit-scrollbar-thumb {
2043
- background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
- }
2045
- /* The grid draws its own scrollbars and pushes the native one out of view by a
2046
- fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
2047
- scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
2048
- .azgrid-scope .inovua-react-scroll-container__wrapper > div {
2049
- scrollbar-width: none;
2050
- }
2051
- .azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
2052
- display: none;
2053
- }
2054
- .azgrid .InovuaReactDataGrid__row.deleted:after {
2055
- border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2056
- }
1937
+ /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
+ * Match the strongest selected-row :hover selectors, including their cells. */
1939
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
+ }
1945
+
1946
+ /* Additional surfaces and typography not assigned colours by Inovua. */
1947
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
+ background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
+ }
1950
+ .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
+ .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
+ background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
+ color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
+ }
1955
+ .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
+ .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
+ fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
+ }
1959
+ .azgrid.InovuaReactDataGrid {
1960
+ background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
+ color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
+ border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
+ }
1966
+ .azgrid .InovuaReactDataGrid__column-header__content,
1967
+ .azgrid .InovuaReactDataGrid__header-group__title {
1968
+ color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
+ font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
+ font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
+ text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
+ letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
+ }
1974
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
+ border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
+ }
1977
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
+ /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
+ border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
+ }
1981
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
+ padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
+ }
1984
+ .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
+ background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
+ color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
+ }
1988
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
+ background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
+ }
1991
+ .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
+ .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
+ box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
+ }
1995
+ .azgrid-scope input,
1996
+ .azgrid-scope select,
1997
+ .azgrid-scope .azgrid-searcharea {
1998
+ color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
+ background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
+ border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
+ }
2004
+ .azgrid-scope input::placeholder {
2005
+ color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
+ }
2007
+ .azgrid-scope input:focus-visible,
2008
+ .azgrid-scope select:focus-visible {
2009
+ outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
+ }
2011
+ .azgrid-scope .inovua-react-pagination-toolbar input,
2012
+ .azgrid-scope .inovua-react-pagination-toolbar select {
2013
+ background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
+ color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
+ border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
+ }
2017
+ .azgrid-scope .inovua-react-toolkit-text-input,
2018
+ .azgrid-scope .inovua-react-toolkit-combo-box,
2019
+ .azgrid-scope .inovua-react-toolkit-menu {
2020
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
+ }
2022
+ /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
+ * Two classes exceed @azrico/controls' single-class menu rules. */
2025
+ .azgrid-context-menu.azrico-controls-contextmenu {
2026
+ --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
+ --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
+ --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
+ --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
+ --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
+ --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
+ --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
+ border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
+ }
2035
+ .azgrid-scope, .azgrid-scope * {
2036
+ accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
+ scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
+ }
2039
+ .azgrid-scope ::-webkit-scrollbar-track {
2040
+ background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
+ }
2042
+ .azgrid-scope ::-webkit-scrollbar-thumb {
2043
+ background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
+ }
2045
+ /* The grid draws its own scrollbars and pushes the native one out of view by a
2046
+ fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
2047
+ scrollbar, which then overlaps the last pixels of the viewport. Hide it only
2048
+ in the row viewport; toolbars need the native scrollbar for correct sizing. */
2049
+ .azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div {
2050
+ scrollbar-width: none;
2051
+ }
2052
+ .azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
2053
+ display: none;
2054
+ }
2055
+ .azgrid .InovuaReactDataGrid__row.deleted:after {
2056
+ border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2057
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@azrico/reactgrid",
3
- "version": "1.6.11",
3
+ "version": "1.6.12",
4
4
  "main": "dist/index.js",
5
5
  "description": "React Datagrid",
6
6
  "author": "Azrideus <MehrdadTavangar@gmail.com>",
package/src/themes/azgrid-theme.css CHANGED
@@ -1934,123 +1934,124 @@
1934
1934
  fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1935
1935
  }
1936
1936
 
1937
- /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
- * Match the strongest selected-row :hover selectors, including their cells. */
1939
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
- background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
- color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
- }
1945
-
1946
- /* Additional surfaces and typography not assigned colours by Inovua. */
1947
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
- background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
- }
1950
- .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
- .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
- background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
- color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
- }
1955
- .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
- .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
- fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
- }
1959
- .azgrid.InovuaReactDataGrid {
1960
- background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
- color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
- border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
- }
1966
- .azgrid .InovuaReactDataGrid__column-header__content,
1967
- .azgrid .InovuaReactDataGrid__header-group__title {
1968
- color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
- font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
- font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
- text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
- letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
- }
1974
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
- border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
- }
1977
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
- /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
- border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
- }
1981
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
- padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
- }
1984
- .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
- }
1988
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
- background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
- }
1991
- .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
- .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
- box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
- }
1995
- .azgrid-scope input,
1996
- .azgrid-scope select,
1997
- .azgrid-scope .azgrid-searcharea {
1998
- color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
- background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
- border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
- }
2004
- .azgrid-scope input::placeholder {
2005
- color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
- }
2007
- .azgrid-scope input:focus-visible,
2008
- .azgrid-scope select:focus-visible {
2009
- outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
- }
2011
- .azgrid-scope .inovua-react-pagination-toolbar input,
2012
- .azgrid-scope .inovua-react-pagination-toolbar select {
2013
- background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
- color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
- border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
- }
2017
- .azgrid-scope .inovua-react-toolkit-text-input,
2018
- .azgrid-scope .inovua-react-toolkit-combo-box,
2019
- .azgrid-scope .inovua-react-toolkit-menu {
2020
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
- }
2022
- /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
- * Two classes exceed @azrico/controls' single-class menu rules. */
2025
- .azgrid-context-menu.azrico-controls-contextmenu {
2026
- --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
- --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
- --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
- --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
- --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
- --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
- --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
- border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
- }
2035
- .azgrid-scope, .azgrid-scope * {
2036
- accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
- scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
- }
2039
- .azgrid-scope ::-webkit-scrollbar-track {
2040
- background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
- }
2042
- .azgrid-scope ::-webkit-scrollbar-thumb {
2043
- background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
- }
2045
- /* The grid draws its own scrollbars and pushes the native one out of view by a
2046
- fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
2047
- scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
2048
- .azgrid-scope .inovua-react-scroll-container__wrapper > div {
2049
- scrollbar-width: none;
2050
- }
2051
- .azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
2052
- display: none;
2053
- }
2054
- .azgrid .InovuaReactDataGrid__row.deleted:after {
2055
- border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2056
- }
1937
+ /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
+ * Match the strongest selected-row :hover selectors, including their cells. */
1939
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
+ }
1945
+
1946
+ /* Additional surfaces and typography not assigned colours by Inovua. */
1947
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
+ background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
+ }
1950
+ .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
+ .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
+ background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
+ color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
+ }
1955
+ .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
+ .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
+ fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
+ }
1959
+ .azgrid.InovuaReactDataGrid {
1960
+ background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
+ color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
+ border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
+ }
1966
+ .azgrid .InovuaReactDataGrid__column-header__content,
1967
+ .azgrid .InovuaReactDataGrid__header-group__title {
1968
+ color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
+ font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
+ font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
+ text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
+ letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
+ }
1974
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
+ border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
+ }
1977
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
+ /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
+ border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
+ }
1981
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
+ padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
+ }
1984
+ .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
+ background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
+ color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
+ }
1988
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
+ background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
+ }
1991
+ .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
+ .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
+ box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
+ }
1995
+ .azgrid-scope input,
1996
+ .azgrid-scope select,
1997
+ .azgrid-scope .azgrid-searcharea {
1998
+ color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
+ background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
+ border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
+ }
2004
+ .azgrid-scope input::placeholder {
2005
+ color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
+ }
2007
+ .azgrid-scope input:focus-visible,
2008
+ .azgrid-scope select:focus-visible {
2009
+ outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
+ }
2011
+ .azgrid-scope .inovua-react-pagination-toolbar input,
2012
+ .azgrid-scope .inovua-react-pagination-toolbar select {
2013
+ background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
+ color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
+ border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
+ }
2017
+ .azgrid-scope .inovua-react-toolkit-text-input,
2018
+ .azgrid-scope .inovua-react-toolkit-combo-box,
2019
+ .azgrid-scope .inovua-react-toolkit-menu {
2020
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
+ }
2022
+ /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
+ * Two classes exceed @azrico/controls' single-class menu rules. */
2025
+ .azgrid-context-menu.azrico-controls-contextmenu {
2026
+ --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
+ --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
+ --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
+ --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
+ --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
+ --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
+ --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
+ border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
+ }
2035
+ .azgrid-scope, .azgrid-scope * {
2036
+ accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
+ scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
+ }
2039
+ .azgrid-scope ::-webkit-scrollbar-track {
2040
+ background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
+ }
2042
+ .azgrid-scope ::-webkit-scrollbar-thumb {
2043
+ background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
+ }
2045
+ /* The grid draws its own scrollbars and pushes the native one out of view by a
2046
+ fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
2047
+ scrollbar, which then overlaps the last pixels of the viewport. Hide it only
2048
+ in the row viewport; toolbars need the native scrollbar for correct sizing. */
2049
+ .azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div {
2050
+ scrollbar-width: none;
2051
+ }
2052
+ .azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
2053
+ display: none;
2054
+ }
2055
+ .azgrid .InovuaReactDataGrid__row.deleted:after {
2056
+ border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2057
+ }