@azrico/reactgrid 1.6.6 → 1.6.9

package/src/themes/azgrid-theme.css

@@ -1452,65 +1452,65 @@
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover,
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column,
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over,
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover,
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column,
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over,
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
 .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--focused .InovuaReactDataGrid__row--active>.InovuaReactDataGrid__row-active-borders-wrapper>.InovuaReactDataGrid__row-active-borders:before,
@@ -1934,105 +1934,123 @@
 	fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
-/* Additional surfaces and typography not assigned colours by Inovua. */
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
-	background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
-}
-.azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
-.azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
-	background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
-	color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
-}
-.azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
-.azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
-	fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
-}
-.azgrid.InovuaReactDataGrid {
-	background: var(--azgrid-bg, var(--azgrid-preset-bg));
-	color: var(--azgrid-fg, var(--azgrid-preset-fg));
-	border-color: var(--azgrid-border, var(--azgrid-preset-border));
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-}
-.azgrid .InovuaReactDataGrid__column-header__content,
-.azgrid .InovuaReactDataGrid__header-group__title {
-	color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
-	font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
-	font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
-	text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
-	letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
-	border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
-	/* Inovua's first-row border-top is !important. Keep the same border API on this row. */
-	border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
-	padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
-}
-.azgrid .InovuaReactDataGrid__empty-wrapper {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
-	background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
-}
-.azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
-.azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
-	box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
-}
-.azgrid-scope input,
-.azgrid-scope select,
-.azgrid-scope .azgrid-searcharea {
-	color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
-	background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
-	border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-}
-.azgrid-scope input::placeholder {
-	color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
-}
-.azgrid-scope input:focus-visible,
-.azgrid-scope select:focus-visible {
-	outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
-}
-.azgrid-scope .inovua-react-pagination-toolbar input,
-.azgrid-scope .inovua-react-pagination-toolbar select {
-	background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
-	color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
-	border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
-}
-.azgrid-scope .inovua-react-toolkit-text-input,
-.azgrid-scope .inovua-react-toolkit-combo-box,
-.azgrid-scope .inovua-react-toolkit-menu {
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-}
-/* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
- * Two classes exceed @azrico/controls' single-class menu rules. */
-.azgrid-context-menu.azrico-controls-contextmenu {
-	--azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
-	--azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
-	--azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
-	--azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
-	--azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	--azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
-	--azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-	border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
-}
-.azgrid-scope, .azgrid-scope * {
-	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
-	scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
-}
-.azgrid-scope ::-webkit-scrollbar-track {
-	background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
-}
-.azgrid-scope ::-webkit-scrollbar-thumb {
-	background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
-}
-.azgrid .InovuaReactDataGrid__row.deleted:after {
-	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
-}
+/* Keep the menu row in its hover state while the pointer is in the portaled menu.
+ * Match the strongest selected-row :hover selectors, including their cells. */
+.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,
+.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,
+.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 {
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
+}
+
+/* Additional surfaces and typography not assigned colours by Inovua. */
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
+	background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
+.azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
+	background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
+	color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
+.azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
+	fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.InovuaReactDataGrid {
+	background: var(--azgrid-bg, var(--azgrid-preset-bg));
+	color: var(--azgrid-fg, var(--azgrid-preset-fg));
+	border-color: var(--azgrid-border, var(--azgrid-preset-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid .InovuaReactDataGrid__column-header__content,
+.azgrid .InovuaReactDataGrid__header-group__title {
+	color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
+	font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
+	font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
+	text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
+	letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
+	border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
+	/* Inovua's first-row border-top is !important. Keep the same border API on this row. */
+	border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
+	padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
+}
+.azgrid .InovuaReactDataGrid__empty-wrapper {
+	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
+	background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
+}
+.azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
+.azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
+	box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
+}
+.azgrid-scope input,
+.azgrid-scope select,
+.azgrid-scope .azgrid-searcharea {
+	color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
+	background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
+	border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid-scope input::placeholder {
+	color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
+}
+.azgrid-scope input:focus-visible,
+.azgrid-scope select:focus-visible {
+	outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
+}
+.azgrid-scope .inovua-react-pagination-toolbar input,
+.azgrid-scope .inovua-react-pagination-toolbar select {
+	background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
+	color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
+	border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
+}
+.azgrid-scope .inovua-react-toolkit-text-input,
+.azgrid-scope .inovua-react-toolkit-combo-box,
+.azgrid-scope .inovua-react-toolkit-menu {
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+}
+/* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
+ * Two classes exceed @azrico/controls' single-class menu rules. */
+.azgrid-context-menu.azrico-controls-contextmenu {
+	--azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+	--azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
+	--azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
+	--azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
+	--azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	--azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
+	--azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+	border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
+}
+.azgrid-scope, .azgrid-scope * {
+	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
+	scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-track {
+	background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-thumb {
+	background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
+}
+/* The grid draws its own scrollbars and pushes the native one out of view by a
+   fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
+   scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
+.azgrid-scope .inovua-react-scroll-container__wrapper > div {
+	scrollbar-width: none;
+}
+.azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
+	display: none;
+}
+.azgrid .InovuaReactDataGrid__row.deleted:after {
+	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
+}

package/src/types/types.ts

@@ -97,6 +97,8 @@ export type AzGridProps = {
 	contextMenuItems?: ConvertableToMenuItem;
 	/** Keep the context menu open when clicking outside (default false). */
 	dontAutoCloseContextMenu?: boolean;
+	/** Close the context menu on Escape (default false). */
+	escapeClosesContextMenu?: boolean;
 	/** Hide the grid context menu and leave the browser's context menu available. */
 	hideContextMenu?: boolean;
 	/** Extra classes on the row context menu, which is portaled to <body> */

package/src/views/DataGrid.tsx

@@ -1,7 +1,7 @@
 import '@inovua/reactdatagrid-enterprise/index.css';
 import '../themes/base_styles.css';
 import '../themes/grid.css';
-import { get_default_key } from '../func/func_grid';
+import { get_default_key, get_row_id } from '../func/func_grid';
 import { ContextMenu } from '@azrico/controls/context-menu';
 import React from 'react';
 
@@ -164,6 +164,20 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 		menuAnchorEl,
 		menuRow,
 	} = useGridEvents(props.gridRef.current, props);
+	const menuRowId =
+		menuAnchorEl && !props.hideContextMenu && props.contextMenuItems
+			? get_row_id(menuRow)
+			: undefined;
+	const consumerRowClassName = props.static_gridOptions?.rowClassName;
+	const rowClassName = React.useCallback(
+		(rowProps) => clsx(
+			typeof consumerRowClassName === 'function'
+				? consumerRowClassName(rowProps)
+				: consumerRowClassName,
+			menuRowId != null && get_row_id(rowProps.data) === menuRowId && 'azgrid-row--menu-open'
+		),
+		[consumerRowClassName, menuRowId]
+	);
 	/* -------------------------------------------------------------------------- */
 	/**
 	 * Merge click events into grid options
@@ -178,6 +192,7 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 		// internal row attributes first, consumer's onRenderRow last so it can override them
 		const consumerOnRenderRow = opts.onRenderRow;
 		const renderProps: any = {
+			rowClassName,
 			onRenderRow: consumerOnRenderRow
 				? (rowProps) => {
 						onRenderRow(rowProps);
@@ -218,6 +233,7 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 		onRowContextMenu,
 		onRenderRow,
 		onRenderLoadMask,
+		rowClassName,
 	]);
 
 	/* -------------------------------------------------------------------------- */
@@ -231,6 +247,7 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 					menuRow={menuRow}
 					close={update_menuRow}
 					dontAutoClose={props.dontAutoCloseContextMenu ?? false}
+					escapeClosesContextMenu={props.escapeClosesContextMenu ?? false}
 					menu_items={props.contextMenuItems as any}
 				/>
 			)}