@azrico/reactgrid 1.6.4 → 1.6.6

package/CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### Unreleased
 
+* 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.
 * Fix select `items` given as plain strings storing a lowercased value (`"Shelf A"` was saved as `"shelf a"`). The item id is now the original string.
@@ -12,6 +13,10 @@ All notable changes to this project will be documented in this file. See [standa
 * Fix the row context menu ignoring the grid theme with `@azrico/controls` 1.6.2, whose menu is no longer MUI-based and is portaled to `<body>`. The menu now gets the grid's theme class (`azgrid-theme-<name>`) and is styled through the controls' `--azrico-contextmenu-*` variables from the `--azgrid-menu-*` tokens. The MUI `ThemeProvider` around the menu is removed.
 * Add `contextMenuClassName` to add your own classes to the context menu. Use it to bring host variables set on a wrapper element, which the portaled menu no longer inherits.
 
+### 1.6.5 (2026-10-15)
+
+* Leave the browser's context menu available when a row has no resolved `contextMenuItems`, and close any previously open grid menu. Respect right-clicks already handled by nested row details.
+
 ### 1.7.1 (2026-10-14)
 
 * Fix two quick clicks on different rows firing `onRowDoubleClick`: the double-click check now keys clicks by the row's id instead of `undefined`.

package/__tests__/context-menu.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+	rootDir: '..',
+	cacheDirectory: '<rootDir>/node_modules/.cache/jest-context-menu',
+	testMatch: ['<rootDir>/__tests__/context-menu.test.js'],
+	moduleNameMapper: {
+		'\\.(css|less|scss|sass)$': '<rootDir>/config/file-mock.js',
+		'^@azrico/controls/context-menu$': '<rootDir>/node_modules/@azrico/controls/dist/src/ContextMenu/index.js',
+	},
+	transform: {
+		'^.+\\.[jt]sx?$': ['babel-jest', {
+			presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+		}],
+	},
+};

package/__tests__/context-menu.test.js

@@ -0,0 +1,188 @@
+/** @jest-environment jsdom */
+const React = require('react');
+const { createRoot } = require('react-dom/client');
+const act = React.act || require('react-dom/test-utils').act;
+const { ContextMenu } = require('@azrico/controls/context-menu');
+const { AzGrid } = require('../src/views/DataGrid');
+
+let mockGridProps;
+jest.mock('@inovua/reactdatagrid-enterprise', () => {
+	const React = require('react');
+	class Grid extends React.Component {
+		render() {
+			mockGridProps = this.props;
+			return React.createElement('div', { 'data-row-id': 'real-row' },
+				React.createElement('span', { id: 'cell' }, 'Cell'));
+		}
+	}
+	Grid.defaultProps = {};
+	return { __esModule: true, default: Grid };
+});
+jest.mock('@azrico/controls/context-menu', () => {
+	const actual = jest.requireActual('@azrico/controls/context-menu');
+	return { ...actual, ContextMenu: jest.fn(actual.ContextMenu) };
+});
+
+const row = { __table_id: 'real-row', name: 'Row' };
+const staleRow = { __table_id: 'stale-row' };
+const rowProps = { data: staleRow, dataSourceArray: [row] };
+let container, root;
+
+beforeEach(() => {
+	global.IS_REACT_ACT_ENVIRONMENT = true;
+	container = document.createElement('div');
+	document.body.appendChild(container);
+	root = createRoot(container);
+	ContextMenu.mockClear();
+});
+afterEach(() => {
+	act(() => root.unmount());
+	container.remove();
+	jest.restoreAllMocks();
+});
+
+function render(contextMenuItems, props = {}) {
+	act(() => root.render(React.createElement(AzGrid, {
+		columns: [], dataSource: [row], contextMenuItems, ...props,
+	})));
+}
+function rightClick(data = rowProps, alreadyHandled = false) {
+	const event = new MouseEvent('contextmenu', { cancelable: true, clientX: 120, clientY: 80 });
+	document.getElementById('cell').dispatchEvent(event);
+	if (alreadyHandled) event.preventDefault();
+	act(() => mockGridProps.onRowContextMenu(data, event));
+	return event;
+}
+function popup() {
+	// Controls 1.6.1 uses the first class; newer controls use the second.
+	return document.querySelector('.azrico-controls-popup, .azrico-controls-contextmenuPopup');
+}
+
+test('omits ContextMenu entirely when there is no prop and leaves the native menu available', () => {
+	render();
+	expect(rightClick().defaultPrevented).toBe(false);
+	expect(ContextMenu).not.toHaveBeenCalled();
+	expect(popup()).toBeNull();
+});
+
+test.each([
+	['empty array', []],
+	['empty row items', () => []],
+	['null row items', () => null],
+	['entries resolving to nothing', () => [null, () => null, () => undefined, false, 7]],
+])('%s leaves the native menu available without a popup', (_, items) => {
+	render(items);
+	expect(rightClick().defaultPrevented).toBe(false);
+	expect(popup()).toBeNull();
+});
+
+test('resolves the real row before deciding whether to open and closes the previous menu for an empty row', () => {
+	const items = jest.fn((data) => data === row ? ['Open'] : []);
+	render(items);
+	expect(rightClick().defaultPrevented).toBe(true);
+	expect(items).toHaveBeenCalledWith(row);
+	expect(popup()).not.toBeNull();
+	expect(rightClick({ data: staleRow }).defaultPrevented).toBe(false);
+	expect(popup()).toBeNull();
+});
+
+test('reads updated props through the same memoised handler', () => {
+	render(['Open']);
+	const handler = mockGridProps.onRowContextMenu;
+	rightClick();
+	render(() => null);
+	expect(mockGridProps.onRowContextMenu).toBe(handler);
+	expect(rightClick().defaultPrevented).toBe(false);
+	expect(popup()).toBeNull();
+	render(['Updated']);
+	expect(rightClick().defaultPrevented).toBe(true);
+	expect(popup().textContent).toContain('Updated');
+});
+
+test.each([
+	['string', 'Open'],
+	['object', { title: 'Open' }],
+	['entry function', [null, (data) => data === row ? 'Open' : null]],
+])('opens a %s item at the cursor', (_, items) => {
+	render(items);
+	expect(rightClick().defaultPrevented).toBe(true);
+	expect(popup().textContent).toContain('Open');
+	const props = ContextMenu.mock.calls.slice(-1)[0][0];
+	expect(props.menuRow).toBe(row);
+	expect(props.menuAnchorEl.getBoundingClientRect()).toEqual({
+		width: 0, height: 0, top: 80, bottom: 80, left: 120, right: 120,
+	});
+});
+
+test('passes the real row to onClick and closes the menu', () => {
+	const onClick = jest.fn();
+	render([{ title: 'Open', onClick }]);
+	rightClick();
+	act(() => document.querySelector('[role="menuitem"]').click());
+	expect(onClick).toHaveBeenCalledWith(row, undefined);
+	expect(popup()).toBeNull();
+});
+
+test('clicking outside closes the menu', async () => {
+	render(['Open']);
+	rightClick();
+	await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+	act(() => document.body.click());
+	expect(popup()).toBeNull();
+});
+
+test('dontAutoCloseContextMenu keeps the menu open on outside clicks and can be updated', async () => {
+	const items = ['Open'];
+	render(items, { dontAutoCloseContextMenu: true });
+	rightClick();
+	await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+	act(() => document.body.click());
+	expect(popup()).not.toBeNull();
+	render(items, { dontAutoCloseContextMenu: false });
+	await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+	act(() => document.body.click());
+	expect(popup()).toBeNull();
+});
+
+test('hideContextMenu omits the menu without evaluating items or suppressing the native menu', () => {
+	const items = jest.fn(() => ['Open']);
+	render(items, { hideContextMenu: true });
+	expect(rightClick().defaultPrevented).toBe(false);
+	expect(items).not.toHaveBeenCalled();
+	expect(ContextMenu).not.toHaveBeenCalled();
+	expect(popup()).toBeNull();
+});
+
+test('hiding an open menu closes it and showing it again waits for a fresh right-click', () => {
+	const items = ['Open'];
+	render(items);
+	const handler = mockGridProps.onRowContextMenu;
+	rightClick();
+	expect(popup()).not.toBeNull();
+	render(items, { hideContextMenu: true });
+	expect(popup()).toBeNull();
+	expect(mockGridProps.onRowContextMenu).toBe(handler);
+	expect(rightClick().defaultPrevented).toBe(false);
+	render(items, { hideContextMenu: false });
+	expect(popup()).toBeNull();
+	expect(rightClick().defaultPrevented).toBe(true);
+	expect(popup()).not.toBeNull();
+});
+
+test('does not open or evaluate grid items for a right-click already handled by row details', () => {
+	const items = jest.fn(() => ['Open']);
+	render(items);
+	rightClick();
+	items.mockClear();
+	rightClick(rowProps, true);
+	expect(items).not.toHaveBeenCalled();
+	expect(popup()).toBeNull();
+});
+
+test('preserves the text-selection bailout and clears an open menu', () => {
+	render(['Open']);
+	rightClick();
+	jest.spyOn(window, 'getSelection').mockReturnValue({ type: 'Range' });
+	expect(rightClick().defaultPrevented).toBe(false);
+	expect(popup()).toBeNull();
+});

package/dist/src/hooks/useGridEvents.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridEvents = useGridEvents;
 var _react = _interopRequireDefault(require("react"));
+var _object = require("@azrico/object");
 var _func_grid = require("../func/func_grid");
 var _func_child = require("../func/func_child");
 var _func_a11y = require("../func/func_a11y");
@@ -76,13 +77,27 @@ function useGridEvents(grid, props) {
     click_data.current = {};
   }, [props.dataSource]);
   /* ------------------------------- ContextMenu ------------------------------ */
+  _react.default.useEffect(() => {
+    if (props.hideContextMenu) update_menuRow(null, null);
+  }, [props.hideContextMenu, update_menuRow]);
   const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
-    if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
+    if (latestProps.current.hideContextMenu || event.defaultPrevented || !rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
       update_menuRow(null, null);
       return true;
     }
-    event.preventDefault();
     const realRow = (0, _func_grid.find_realData)(rowProps.dataSourceArray, event.target, rowProps.data);
+    const items = (0, _object.fn_eval)(latestProps.current.contextMenuItems, realRow) || [];
+    const resolvedItems = (Array.isArray(items) ? items : [items]).map(item => {
+      const value = (0, _object.fn_eval)(item, realRow);
+      return typeof value === 'string' ? {
+        title: value
+      } : value;
+    }).filter(item => item != null && typeof item === 'object');
+    if (!resolvedItems.length) {
+      update_menuRow(null, null);
+      return true;
+    }
+    event.preventDefault();
     const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
     update_menuRow(realRow, anEl);
     return false;

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

@@ -73,6 +73,10 @@ export type AzGridProps = {
     rightColumns?: string[];
     customColumns?: CustomColumnDefinition[];
     contextMenuItems?: ConvertableToMenuItem;
+    /** Keep the context menu open when clicking outside (default false). */
+    dontAutoCloseContextMenu?: 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> */
     contextMenuClassName?: string;
     highlightedRow?: any;

package/dist/src/views/DataGrid.js

@@ -121,7 +121,7 @@ function AzGrid(props) {
  * @returns
  */
 function DataGridEventsWrapper(props) {
-  var _props$theme;
+  var _props$theme, _props$dontAutoCloseC;
   const themeClass = `azgrid-theme-${(_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : props.dark ? 'dark' : 'light'}`;
   /* -------------------------------------------------------------------------- */
   const {
@@ -185,12 +185,12 @@ function DataGridEventsWrapper(props) {
   // The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
   return _react.default.createElement("div", {
     className: (0, _clsx.default)('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)
-  }, _react.default.createElement(_contextMenu.ContextMenu, {
+  }, !props.hideContextMenu && props.contextMenuItems && _react.default.createElement(_contextMenu.ContextMenu, {
     classname: (0, _clsx.default)('azgrid-context-menu', themeClass, props.contextMenuClassName),
     menuAnchorEl: menuAnchorEl,
     menuRow: menuRow,
     close: update_menuRow,
-    dontAutoClose: false,
+    dontAutoClose: (_props$dontAutoCloseC = props.dontAutoCloseContextMenu) !== null && _props$dontAutoCloseC !== void 0 ? _props$dontAutoCloseC : false,
     menu_items: props.contextMenuItems
   }), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
     ...props,

package/package.json

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

package/src/hooks/useGridEvents.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fn_eval } from '@azrico/object';
 import { DataGridWrapperProps, GridType } from '../types/types';
 import { find_realData, get_row_id } from '../func/func_grid';
 import { func_selection } from '../func/func_child';
@@ -73,14 +74,34 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 	}, [props.dataSource]);
 
 	/* ------------------------------- ContextMenu ------------------------------ */
+	React.useEffect(() => {
+		if (props.hideContextMenu) update_menuRow(null, null);
+	}, [props.hideContextMenu, update_menuRow]);
+
 	const onRowContextMenu = React.useCallback((rowProps, event) => {
-		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
+		if (
+			latestProps.current.hideContextMenu ||
+			event.defaultPrevented ||
+			!rowProps ||
+			!rowProps.data ||
+			func_selection.has_selection()
+		) {
 			update_menuRow(null, null);
 			return true;
 		}
-		event.preventDefault();
-
 		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
+		const items = fn_eval(latestProps.current.contextMenuItems, realRow) || [];
+		const resolvedItems = (Array.isArray(items) ? items : [items])
+			.map((item) => {
+				const value = fn_eval(item, realRow);
+				return typeof value === 'string' ? { title: value } : value;
+			})
+			.filter((item) => item != null && typeof item === 'object');
+		if (!resolvedItems.length) {
+			update_menuRow(null, null);
+			return true;
+		}
+		event.preventDefault();
 		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
 		update_menuRow(realRow, anEl);
 		return false;

package/src/types/types.ts

@@ -95,6 +95,10 @@ export type AzGridProps = {
 	customColumns?: CustomColumnDefinition[];
 
 	contextMenuItems?: ConvertableToMenuItem;
+	/** Keep the context menu open when clicking outside (default false). */
+	dontAutoCloseContextMenu?: 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> */
 	contextMenuClassName?: string;
 

package/src/views/DataGrid.tsx

@@ -224,14 +224,16 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	// The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
 	return (
 		<div className={clsx('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)}>
-			<ContextMenu
-				classname={clsx('azgrid-context-menu', themeClass, props.contextMenuClassName)}
-				menuAnchorEl={menuAnchorEl}
-				menuRow={menuRow}
-				close={update_menuRow}
-				dontAutoClose={false}
-				menu_items={props.contextMenuItems as any}
-			/>
+			{!props.hideContextMenu && props.contextMenuItems && (
+				<ContextMenu
+					classname={clsx('azgrid-context-menu', themeClass, props.contextMenuClassName)}
+					menuAnchorEl={menuAnchorEl}
+					menuRow={menuRow}
+					close={update_menuRow}
+					dontAutoClose={props.dontAutoCloseContextMenu ?? false}
+					menu_items={props.contextMenuItems as any}
+				/>
+			)}
 			{props.details_dataSource ? (
 				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
 			) : (