@azrico/reactgrid 1.6.6 → 1.6.7

package/CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### Unreleased
 
+* Make closing the row context menu with Escape opt-in through `escapeClosesContextMenu` (default `false`).
+* Keep the right-clicked row highlighted with the theme's hover colours while its context menu is open, preserving caller row classes and clearing the highlight on close. Correct row hover rules to use hover tokens instead of empty-state tokens.
 * Add `dontAutoCloseContextMenu` to keep the row context menu open on outside clicks, and `hideContextMenu` to hide it while leaving the browser's context menu available.
 * Fix columns with a `type` (`number`, `select`, `bool`, ...) staying read-only unless they were listed in `editableColumns`. A typed column is editable unless you set `editable: false`.
 * Fix a typed column's `editable` function being replaced by `true`. Functions and booleans are kept, so per-cell editability works again.

package/__tests__/context-menu.test.js

@@ -11,7 +11,8 @@ jest.mock('@inovua/reactdatagrid-enterprise', () => {
 	class Grid extends React.Component {
 		render() {
 			mockGridProps = this.props;
-			return React.createElement('div', { 'data-row-id': 'real-row' },
+			const rowClassName = this.props.rowClassName?.({ data: { __table_id: 'real-row' } });
+			return React.createElement('div', { 'data-row-id': 'real-row', className: rowClassName },
 				React.createElement('span', { id: 'cell' }, 'Cell'));
 		}
 	}
@@ -63,6 +64,7 @@ test('omits ContextMenu entirely when there is no prop and leaves the native men
 	expect(rightClick().defaultPrevented).toBe(false);
 	expect(ContextMenu).not.toHaveBeenCalled();
 	expect(popup()).toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
 });
 
 test.each([
@@ -74,6 +76,7 @@ test.each([
 	render(items);
 	expect(rightClick().defaultPrevented).toBe(false);
 	expect(popup()).toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
 });
 
 test('resolves the real row before deciding whether to open and closes the previous menu for an empty row', () => {
@@ -118,17 +121,80 @@ test('passes the real row to onClick and closes the menu', () => {
 	const onClick = jest.fn();
 	render([{ title: 'Open', onClick }]);
 	rightClick();
+	expect(container.querySelector('.azgrid-row--menu-open')).not.toBeNull();
 	act(() => document.querySelector('[role="menuitem"]').click());
 	expect(onClick).toHaveBeenCalledWith(row, undefined);
 	expect(popup()).toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
 });
 
 test('clicking outside closes the menu', async () => {
 	render(['Open']);
 	rightClick();
+	expect(container.querySelector('.azgrid-row--menu-open')).not.toBeNull();
 	await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
 	act(() => document.body.click());
 	expect(popup()).toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
+});
+
+test.each(['light', 'dark', 'deco'])('keeps the menu row highlighted in %s when moving into the portal', (theme) => {
+	render(['Open'], { theme, escapeClosesContextMenu: true, gridOptions: { rowClassName: 'consumer-row' } });
+	rightClick();
+	const highlighted = container.querySelector('.azgrid-row--menu-open');
+	expect(highlighted.classList.contains('consumer-row')).toBe(true);
+	const menuItem = document.querySelector('[role="menuitem"]');
+	expect(container.contains(menuItem)).toBe(false);
+	act(() => menuItem.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })));
+	expect(highlighted.classList.contains('azgrid-row--menu-open')).toBe(true);
+	act(() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+	expect(popup()).toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
+	expect(highlighted.classList.contains('consumer-row')).toBe(true);
+});
+
+test('merges caller rowClassName functions and matches rows by ID rather than object identity', () => {
+	const rowClassName = jest.fn(() => 'consumer-row');
+	render(['Open'], { gridOptions: { rowClassName } });
+	rightClick();
+	const args = { data: { ...row }, props: {}, className: 'inovua-row' };
+	expect(mockGridProps.rowClassName(args)).toBe('consumer-row azgrid-row--menu-open');
+	expect(rowClassName).toHaveBeenLastCalledWith(args);
+	expect(mockGridProps.rowClassName({ data: staleRow })).toBe('consumer-row');
+	expect(mockGridProps.rowClassName({ data: {} })).toBe('consumer-row');
+});
+
+test.each([undefined, false])('Escape leaves the menu and highlight open when escapeClosesContextMenu is %s', (escapeClosesContextMenu) => {
+	render(['Open'], { escapeClosesContextMenu });
+	rightClick();
+	act(() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+	expect(popup()).not.toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).not.toBeNull();
+});
+
+test('escapeClosesContextMenu can be disabled and enabled while the menu is open', () => {
+	const items = ['Open'];
+	render(items, { escapeClosesContextMenu: true });
+	rightClick();
+	render(items, { escapeClosesContextMenu: false });
+	act(() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+	expect(popup()).not.toBeNull();
+	render(items, { escapeClosesContextMenu: true });
+	act(() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+	expect(popup()).toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
+});
+
+test('removing menu items clears the highlight and does not reopen the menu when items return', () => {
+	const items = ['Open'];
+	render(items);
+	rightClick();
+	expect(container.querySelector('.azgrid-row--menu-open')).not.toBeNull();
+	render();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
+	render(items);
+	expect(popup()).toBeNull();
+	expect(container.querySelector('.azgrid-row--menu-open')).toBeNull();
 });
 
 test('dontAutoCloseContextMenu keeps the menu open on outside clicks and can be updated', async () => {

package/config/check-theme.cjs

@@ -5,6 +5,29 @@ const cssTree = require('css-tree');
 const css = fs.readFileSync('src/themes/azgrid-theme.css', 'utf8');
 cssTree.parse(css);
 const theme = postcss.parse(css);
+const selectorParser = require('postcss-selector-parser');
+const { compare, selectorSpecificity } = require('@csstools/selector-specificity');
+const specificity = selector => selectorSpecificity(selectorParser().astSync(selector).first);
+const menuRowRule = theme.nodes.find(n => n.type === 'rule' && n.selector.includes('.azgrid-row--menu-open'));
+assert(menuRowRule, 'missing open-menu row styles');
+const menuPaint = Object.fromEntries(menuRowRule.nodes.filter(n => n.type === 'decl').map(d => [d.prop, d.value]));
+assert.equal(menuPaint.background, 'var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover))');
+assert.equal(menuPaint.color, 'var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover))');
+for (const suffix of ['__row-hover-target', '__cell', '__row-index-column']) {
+ assert(menuRowRule.selectors.some(s => s.endsWith('.InovuaReactDataGrid' + suffix)), 'missing menu row surface ' + suffix);
+}
+theme.walkRules(rule => {
+ for (const selector of rule.selectors) {
+  if (!selector.includes('__row-hover-target:hover')) continue;
+  const surface = selector.includes('__row-index-column') ? '__row-index-column'
+   : selector.includes('__cell--over') ? '__cell' : '__row-hover-target';
+  const menuSelector = menuRowRule.selectors.find(s => s.endsWith('.InovuaReactDataGrid' + surface));
+  assert(compare(specificity(menuSelector), specificity(selector)) >= 0, 'menu highlight weaker than ' + selector);
+  for (const declaration of rule.nodes.filter(n => n.type === 'decl')) {
+   if (declaration.prop in menuPaint) assert.equal(declaration.value, menuPaint[declaration.prop], 'hover paint differs from menu highlight');
+  }
+ }
+});
 const presets = new Set();
 const used = new Set();
 let important = [];

package/config/generate-theme.cjs

@@ -67,6 +67,8 @@ function tokenFor(selector, prop, literal) {
 	if (/loader-spinner/.test(selector)) return literal === '#7986cb' ? 'accent' : 'muted-fg';
 	if (/loader-loadbar/.test(selector)) return 'loading-fg';
 	if (/load-mask|loading/.test(selector)) return bg ? 'loading-bg' : 'loading-fg';
+	// :not(.row--empty) in row hover selectors does not describe an empty state.
+	if (/__row-hover-target:hover/.test(selector)) return bg ? 'row-bg-hover' : 'row-fg-hover';
 	if (/empty/.test(selector)) return bg ? 'empty-bg' : 'empty-fg';
 	if (/placeholder/.test(selector)) return 'filter-placeholder';
 	if (/sort-icon|selection-dragger|active-borders|checkbox/.test(selector)) {

package/config/theme-extras.css

@@ -1,3 +1,12 @@
+/* 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));

package/dist/src/hooks/useGridEvents.js

@@ -78,8 +78,16 @@ function useGridEvents(grid, props) {
   }, [props.dataSource]);
   /* ------------------------------- ContextMenu ------------------------------ */
   _react.default.useEffect(() => {
-    if (props.hideContextMenu) update_menuRow(null, null);
-  }, [props.hideContextMenu, update_menuRow]);
+    if (props.hideContextMenu || !props.contextMenuItems) update_menuRow(null, null);
+  }, [props.hideContextMenu, props.contextMenuItems, update_menuRow]);
+  _react.default.useEffect(() => {
+    if (!menuAnchorEl || !props.escapeClosesContextMenu) return;
+    const onKeyDown = event => {
+      if (event.key === 'Escape') update_menuRow(null, null);
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [menuAnchorEl, props.escapeClosesContextMenu, update_menuRow]);
   const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
     if (latestProps.current.hideContextMenu || event.defaultPrevented || !rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
       update_menuRow(null, null);

package/dist/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,6 +1934,15 @@
 	fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
+/* 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));

package/dist/src/types/types.d.ts

@@ -75,6 +75,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/dist/src/views/DataGrid.js

@@ -121,7 +121,7 @@ function AzGrid(props) {
  * @returns
  */
 function DataGridEventsWrapper(props) {
-  var _props$theme, _props$dontAutoCloseC;
+  var _props$theme, _props$static_gridOpt, _props$dontAutoCloseC;
   const themeClass = `azgrid-theme-${(_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : props.dark ? 'dark' : 'light'}`;
   /* -------------------------------------------------------------------------- */
   const {
@@ -133,6 +133,9 @@ function DataGridEventsWrapper(props) {
     menuAnchorEl,
     menuRow
   } = (0, _useGridEvents.useGridEvents)(props.gridRef.current, props);
+  const menuRowId = menuAnchorEl && !props.hideContextMenu && props.contextMenuItems ? (0, _func_grid.get_row_id)(menuRow) : undefined;
+  const consumerRowClassName = (_props$static_gridOpt = props.static_gridOptions) === null || _props$static_gridOpt === void 0 ? void 0 : _props$static_gridOpt.rowClassName;
+  const rowClassName = _react.default.useCallback(rowProps => (0, _clsx.default)(typeof consumerRowClassName === 'function' ? consumerRowClassName(rowProps) : consumerRowClassName, menuRowId != null && (0, _func_grid.get_row_id)(rowProps.data) === menuRowId && 'azgrid-row--menu-open'), [consumerRowClassName, menuRowId]);
   /* -------------------------------------------------------------------------- */
   /**
    * Merge click events into grid options
@@ -146,6 +149,7 @@ function DataGridEventsWrapper(props) {
     // internal row attributes first, consumer's onRenderRow last so it can override them
     const consumerOnRenderRow = opts.onRenderRow;
     const renderProps = {
+      rowClassName,
       onRenderRow: consumerOnRenderRow ? rowProps => {
         onRenderRow(rowProps);
         consumerOnRenderRow(rowProps);
@@ -180,7 +184,7 @@ function DataGridEventsWrapper(props) {
       ...renderProps,
       ...a11yProps
     };
-  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask]);
+  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask, rowClassName]);
   /* -------------------------------------------------------------------------- */
   // The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
   return _react.default.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.6.6",
+	"version": "1.6.7",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/hooks/useGridEvents.ts

@@ -75,8 +75,17 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 
 	/* ------------------------------- ContextMenu ------------------------------ */
 	React.useEffect(() => {
-		if (props.hideContextMenu) update_menuRow(null, null);
-	}, [props.hideContextMenu, update_menuRow]);
+		if (props.hideContextMenu || !props.contextMenuItems) update_menuRow(null, null);
+	}, [props.hideContextMenu, props.contextMenuItems, update_menuRow]);
+
+	React.useEffect(() => {
+		if (!menuAnchorEl || !props.escapeClosesContextMenu) return;
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') update_menuRow(null, null);
+		};
+		document.addEventListener('keydown', onKeyDown);
+		return () => document.removeEventListener('keydown', onKeyDown);
+	}, [menuAnchorEl, props.escapeClosesContextMenu, update_menuRow]);
 
 	const onRowContextMenu = React.useCallback((rowProps, event) => {
 		if (

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,6 +1934,15 @@
 	fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
+/* 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));

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,
 	]);
 
 	/* -------------------------------------------------------------------------- */