@azrico/reactgrid 1.6.2 → 1.6.5

package/CHANGELOG.md

@@ -1,19 +1,33 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-### 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`.
-
-### 1.7.0 (2026-10-14)
-
-* Add `advancedFilterLabel` to rename the quick-search label (default "Search").
-* Add `advancedFilterPlaceholder` for the quick-search input. A string is the native placeholder; any other node (custom HTML) is shown over the empty input.
-
-### 1.6.0 (2026-10-14)
-
-* Pass `filterValue`, `sortInfo` and `groupBy` to a `dataSource` function next to `skip`, `limit`, `cached_data` and `last_cache_info`, so header filters can drive a server-side search.
-* With `gridOptions.remoteFilter` / `remoteSort`, a filter or sort change invalidates the data cache and calls `dataSource` again. Local filtering and sorting still reuse the cached rows.
-* Export the typed `AzDataSourceParams` and `AzDataSourceFunc` for the `dataSource` and `details_dataSource` props.
-* Re-export `SelectFilter`, `NumberFilter`, `DateFilter` and `BoolFilter` for `column.filterEditor`.
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### Unreleased
+
+* 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.
+* Fix the "Failed prop type: Invalid prop `headerDOMProps` of type `function`" warning on every grid. `headerDOMProps` is now an object; `aria-colindex` and `aria-sort` are set on the header cells from the grid state. Header cells also get `data-column`.
+* Add `children` to `AzGridProps`, rendered after the grid.
+* 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`.
+
+### 1.7.0 (2026-10-14)
+
+* Add `advancedFilterLabel` to rename the quick-search label (default "Search").
+* Add `advancedFilterPlaceholder` for the quick-search input. A string is the native placeholder; any other node (custom HTML) is shown over the empty input.
+
+### 1.6.0 (2026-10-14)
+
+* Pass `filterValue`, `sortInfo` and `groupBy` to a `dataSource` function next to `skip`, `limit`, `cached_data` and `last_cache_info`, so header filters can drive a server-side search.
+* With `gridOptions.remoteFilter` / `remoteSort`, a filter or sort change invalidates the data cache and calls `dataSource` again. Local filtering and sorting still reuse the cached rows.
+* Export the typed `AzDataSourceParams` and `AzDataSourceFunc` for the `dataSource` and `details_dataSource` props.
+* Re-export `SelectFilter`, `NumberFilter`, `DateFilter` and `BoolFilter` for `column.filterEditor`.

package/README.md

@@ -1,164 +1,165 @@
-# @azrico/reactgrid
-
-Private React data grid package for Azrideus' projects.
-
-## Usage
-
-```tsx
-import { AzGrid } from '@azrico/reactgrid';
-import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
-
-const columns = [{ name: 'name', header: 'Name', defaultFlex: 1 }];
-const rows = [{ __table_id: '1', name: 'Alice' }];
-
-<AzGrid theme="light" columns={columns} dataSource={rows} />;
-```
-
-The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
-
-## Accessibility
-
-The grid exposes ARIA grid semantics, so screen readers and automation tools can read it from the accessibility tree.
-
-| Element | Attributes |
-| --- | --- |
-| Grid root | `role="grid"`, `aria-rowcount` (total rows incl. header; the full data count when paginated), `aria-colcount` (visible columns), `aria-label`, `aria-readonly="true"` when the grid isn't editable, `aria-busy="true"` while loading |
-| Header row | `role="row"`, `aria-rowindex="1"` |
-| Header cells | `role="columnheader"`, `aria-colindex`, `aria-sort` (`ascending` / `descending` / `none`, sortable columns only) |
-| Rows | `role="row"`, `aria-rowindex` (1-based, header is 1, includes the page offset), `aria-selected` when selection is enabled, `data-row-id` |
-| Body cells | `role="gridcell"`, `aria-colindex`, `data-column="<column name>"`, `aria-readonly="true"` when the cell can't be edited |
-| Row-number cells | `role="rowheader"` |
-
-New props:
-
-- `ariaLabel?: string` on the grid sets the accessible name of the grid.
-- `ariaLabel?: (value, data) => string` on a column sets `aria-label` on its cells. Use it for icons, badges or values whose visible text isn't descriptive.
-
-```tsx
-const columns = [{ name: 'status', header: 'Status', ariaLabel: (value) => `Status: ${value}` }];
-
-<AzGrid ariaLabel="Orders" columns={columns} dataSource={rows} />;
-```
-
-Override any cell attribute with the column's `cellDOMProps` / `headerDOMProps`. Values you set there are kept.
-A `gridOptions.onRenderRow` runs after the grid's own row attributes are set, so it can change them too.
-
-## Themes
-
-Use `theme="light"` (default), `theme="dark"`, or a custom name. Custom names apply
-`azgrid-theme-<name>` to the grid and use light defaults for unspecified variables.
-
-`dark` remains a deprecated alias. `theme` takes precedence; `gridOptions.theme` is ignored.
-
-Set `--azgrid-*` variables on a wrapper, `:root`, or a theme class. Each grid can use a different palette.
-
-```tsx
-<div className="my-grid">
-  <AzGrid theme="light" columns={columns} dataSource={rows} />
-</div>
-```
-
-```css
-.my-grid {
-  --azgrid-accent: #345b93;
-  --azgrid-header-bg: #edf2f8;
-  --azgrid-row-bg-hover: #e4ecf7;
-}
-```
-
-## CSS variables
-
-All variables have light/dark defaults. Use valid CSS values for the named property.
-`--azgrid-locked-column-shadow` accepts a complete `box-shadow` value.
-
-<!-- azgrid-tokens -->
-| Variable | Controls |
-| --- | --- |
-| `--azgrid-bg` | Grid background |
-| `--azgrid-fg` | Grid text |
-| `--azgrid-border` | Grid border and separators |
-| `--azgrid-font-family` | Grid and control fonts |
-| `--azgrid-radius` | Grid, input and menu corner radius; default `0` |
-| `--azgrid-accent` | Focus, sort arrows, checkboxes and selection handles |
-| `--azgrid-transparent` | Transparent structural surfaces |
-| `--azgrid-muted-fg` | Disabled text and secondary icons |
-| `--azgrid-shadow-color` | Menu and input shadow colour |
-| `--azgrid-header-bg` | Header background |
-| `--azgrid-header-fg` | Header text |
-| `--azgrid-header-border` | Header separators |
-| `--azgrid-header-font-size` | Header font size |
-| `--azgrid-header-text-transform` | Header text transform |
-| `--azgrid-header-letter-spacing` | Header letter spacing |
-| `--azgrid-header-font-weight` | Header font weight |
-| `--azgrid-row-bg-even` | Even and non-zebra rows |
-| `--azgrid-row-bg-odd` | Odd rows |
-| `--azgrid-row-bg-hover` | Hovered rows and cells |
-| `--azgrid-row-fg-hover` | Hovered row text |
-| `--azgrid-row-bg-selected` | Selected rows and cells |
-| `--azgrid-row-fg-selected` | Selected row text |
-| `--azgrid-row-bg-active` | Active rows |
-| `--azgrid-cell-border` | Cell border colour |
-| `--azgrid-cell-border-width` | Cell border width |
-| `--azgrid-cell-padding` | Data cell padding |
-| `--azgrid-filter-bg` | Filter row, input, editor and search background |
-| `--azgrid-filter-fg` | Filter input and editor text |
-| `--azgrid-filter-border` | Filter input borders |
-| `--azgrid-filter-placeholder` | Input placeholder text |
-| `--azgrid-filter-focus-ring` | Focused input border and ring |
-| `--azgrid-pagination-bg` | Pagination toolbar and control background |
-| `--azgrid-pagination-fg` | Pagination text and icons |
-| `--azgrid-pagination-border` | Pagination control borders |
-| `--azgrid-menu-bg` | Menu, select dropdown and date picker background |
-| `--azgrid-menu-fg` | Menu text and icons |
-| `--azgrid-menu-border` | Menu borders and separators |
-| `--azgrid-menu-bg-hover` | Hovered and focused menu entries |
-| `--azgrid-scrollbar-track` | Scrollbar tracks |
-| `--azgrid-scrollbar-thumb` | Scrollbar thumbs |
-| `--azgrid-empty-bg` | Empty state background |
-| `--azgrid-empty-fg` | Empty state text |
-| `--azgrid-loading-bg` | Loading overlay background |
-| `--azgrid-loading-fg` | Loading text and spinner |
-| `--azgrid-tree-bg` | Tree and group row background |
-| `--azgrid-tree-fg` | Tree and group text and expand icons |
-| `--azgrid-details-bg` | Row details background |
-| `--azgrid-locked-column-shadow` | Locked column shadow |
-<!-- /azgrid-tokens -->
-
-## Art Deco example
-
-Use dark defaults with an obsidian background, gold accents, square corners and uppercase headers.
-
-```tsx
-<div className="deco-grid">
-  <AzGrid theme="dark" columns={columns} dataSource={rows} />
-</div>
-```
-
-```css
-.deco-grid {
-  --azgrid-bg: #0A0A0A;
-  --azgrid-fg: #eee7d6;
-  --azgrid-border: #6b5824;
-  --azgrid-accent: #D4AF37;
-  --azgrid-radius: 0;
-  --azgrid-header-bg: var(--azgrid-bg);
-  --azgrid-header-fg: var(--azgrid-accent);
-  --azgrid-header-text-transform: uppercase;
-  --azgrid-header-letter-spacing: .1em;
-  --azgrid-header-font-weight: 600;
-  --azgrid-cell-border: var(--azgrid-border);
-  --azgrid-cell-border-width: 1px;
-  --azgrid-row-bg-odd: #12110e;
-  --azgrid-row-bg-hover: #282211;
-  --azgrid-row-bg-selected: #423619;
-  --azgrid-row-bg-active: #332a15;
-  --azgrid-scrollbar-track: var(--azgrid-bg);
-  --azgrid-scrollbar-thumb: var(--azgrid-border);
-  --azgrid-loading-bg: rgba(10, 10, 10, .85);
-}
-```
-
-See [src/example.tsx](src/example.tsx) for light, dark and a complete custom `deco` palette.
-
-Custom renderers must style their own content. External menu portal containers need
-`azgrid-scope`, the matching `azgrid-theme-<name>` class and the host variables.
+# @azrico/reactgrid
+
+Private React data grid package for Azrideus' projects.
+
+## Usage
+
+```tsx
+import { AzGrid } from '@azrico/reactgrid';
+import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
+
+const columns = [{ name: 'name', header: 'Name', defaultFlex: 1 }];
+const rows = [{ __table_id: '1', name: 'Alice' }];
+
+<AzGrid theme="light" columns={columns} dataSource={rows} />;
+```
+
+The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
+
+## Accessibility
+
+The grid exposes ARIA grid semantics, so screen readers and automation tools can read it from the accessibility tree.
+
+| Element | Attributes |
+| --- | --- |
+| Grid root | `role="grid"`, `aria-rowcount` (total rows incl. header; the full data count when paginated), `aria-colcount` (visible columns), `aria-label`, `aria-readonly="true"` when the grid isn't editable, `aria-busy="true"` while loading |
+| Header row | `role="row"`, `aria-rowindex="1"` |
+| Header cells | `role="columnheader"`, `aria-colindex`, `aria-sort` (`ascending` / `descending` / `none`, sortable columns only), `data-column="<column id>"` |
+| Rows | `role="row"`, `aria-rowindex` (1-based, header is 1, includes the page offset), `aria-selected` when selection is enabled, `data-row-id` |
+| Body cells | `role="gridcell"`, `aria-colindex`, `data-column="<column name>"`, `aria-readonly="true"` when the cell can't be edited |
+| Row-number cells | `role="rowheader"` |
+
+New props:
+
+- `ariaLabel?: string` on the grid sets the accessible name of the grid.
+- `ariaLabel?: (value, data) => string` on a column sets `aria-label` on its cells. Use it for icons, badges or values whose visible text isn't descriptive.
+
+```tsx
+const columns = [{ name: 'status', header: 'Status', ariaLabel: (value) => `Status: ${value}` }];
+
+<AzGrid ariaLabel="Orders" columns={columns} dataSource={rows} />;
+```
+
+Override any cell attribute with the column's `cellDOMProps` / `headerDOMProps`. Values you set there are kept.
+Pass `headerDOMProps` as an object: Inovua's prop types reject a function there. A function still works but logs a prop-type warning.
+A `gridOptions.onRenderRow` runs after the grid's own row attributes are set, so it can change them too.
+
+## Themes
+
+Use `theme="light"` (default), `theme="dark"`, or a custom name. Custom names apply
+`azgrid-theme-<name>` to the grid and use light defaults for unspecified variables.
+
+`dark` remains a deprecated alias. `theme` takes precedence; `gridOptions.theme` is ignored.
+
+Set `--azgrid-*` variables on a wrapper, `:root`, or a theme class. Each grid can use a different palette.
+
+```tsx
+<div className="my-grid">
+  <AzGrid theme="light" columns={columns} dataSource={rows} />
+</div>
+```
+
+```css
+.my-grid {
+  --azgrid-accent: #345b93;
+  --azgrid-header-bg: #edf2f8;
+  --azgrid-row-bg-hover: #e4ecf7;
+}
+```
+
+## CSS variables
+
+All variables have light/dark defaults. Use valid CSS values for the named property.
+`--azgrid-locked-column-shadow` accepts a complete `box-shadow` value.
+
+<!-- azgrid-tokens -->
+| Variable | Controls |
+| --- | --- |
+| `--azgrid-bg` | Grid background |
+| `--azgrid-fg` | Grid text |
+| `--azgrid-border` | Grid border and separators |
+| `--azgrid-font-family` | Grid and control fonts |
+| `--azgrid-radius` | Grid, input and menu corner radius; default `0` |
+| `--azgrid-accent` | Focus, sort arrows, checkboxes and selection handles |
+| `--azgrid-transparent` | Transparent structural surfaces |
+| `--azgrid-muted-fg` | Disabled text and secondary icons |
+| `--azgrid-shadow-color` | Menu and input shadow colour |
+| `--azgrid-header-bg` | Header background |
+| `--azgrid-header-fg` | Header text |
+| `--azgrid-header-border` | Header separators |
+| `--azgrid-header-font-size` | Header font size |
+| `--azgrid-header-text-transform` | Header text transform |
+| `--azgrid-header-letter-spacing` | Header letter spacing |
+| `--azgrid-header-font-weight` | Header font weight |
+| `--azgrid-row-bg-even` | Even and non-zebra rows |
+| `--azgrid-row-bg-odd` | Odd rows |
+| `--azgrid-row-bg-hover` | Hovered rows and cells |
+| `--azgrid-row-fg-hover` | Hovered row text |
+| `--azgrid-row-bg-selected` | Selected rows and cells |
+| `--azgrid-row-fg-selected` | Selected row text |
+| `--azgrid-row-bg-active` | Active rows |
+| `--azgrid-cell-border` | Cell border colour |
+| `--azgrid-cell-border-width` | Cell border width |
+| `--azgrid-cell-padding` | Data cell padding |
+| `--azgrid-filter-bg` | Filter row, input, editor and search background |
+| `--azgrid-filter-fg` | Filter input and editor text |
+| `--azgrid-filter-border` | Filter input borders |
+| `--azgrid-filter-placeholder` | Input placeholder text |
+| `--azgrid-filter-focus-ring` | Focused input border and ring |
+| `--azgrid-pagination-bg` | Pagination toolbar and control background |
+| `--azgrid-pagination-fg` | Pagination text and icons |
+| `--azgrid-pagination-border` | Pagination control borders |
+| `--azgrid-menu-bg` | Menu, select dropdown and date picker background |
+| `--azgrid-menu-fg` | Menu text and icons |
+| `--azgrid-menu-border` | Menu borders and separators |
+| `--azgrid-menu-bg-hover` | Hovered and focused menu entries |
+| `--azgrid-scrollbar-track` | Scrollbar tracks |
+| `--azgrid-scrollbar-thumb` | Scrollbar thumbs |
+| `--azgrid-empty-bg` | Empty state background |
+| `--azgrid-empty-fg` | Empty state text |
+| `--azgrid-loading-bg` | Loading overlay background |
+| `--azgrid-loading-fg` | Loading text and spinner |
+| `--azgrid-tree-bg` | Tree and group row background |
+| `--azgrid-tree-fg` | Tree and group text and expand icons |
+| `--azgrid-details-bg` | Row details background |
+| `--azgrid-locked-column-shadow` | Locked column shadow |
+<!-- /azgrid-tokens -->
+
+## Art Deco example
+
+Use dark defaults with an obsidian background, gold accents, square corners and uppercase headers.
+
+```tsx
+<div className="deco-grid">
+  <AzGrid theme="dark" columns={columns} dataSource={rows} />
+</div>
+```
+
+```css
+.deco-grid {
+  --azgrid-bg: #0A0A0A;
+  --azgrid-fg: #eee7d6;
+  --azgrid-border: #6b5824;
+  --azgrid-accent: #D4AF37;
+  --azgrid-radius: 0;
+  --azgrid-header-bg: var(--azgrid-bg);
+  --azgrid-header-fg: var(--azgrid-accent);
+  --azgrid-header-text-transform: uppercase;
+  --azgrid-header-letter-spacing: .1em;
+  --azgrid-header-font-weight: 600;
+  --azgrid-cell-border: var(--azgrid-border);
+  --azgrid-cell-border-width: 1px;
+  --azgrid-row-bg-odd: #12110e;
+  --azgrid-row-bg-hover: #282211;
+  --azgrid-row-bg-selected: #423619;
+  --azgrid-row-bg-active: #332a15;
+  --azgrid-scrollbar-track: var(--azgrid-bg);
+  --azgrid-scrollbar-thumb: var(--azgrid-border);
+  --azgrid-loading-bg: rgba(10, 10, 10, .85);
+}
+```
+
+See [src/example.tsx](src/example.tsx) for light, dark and a complete custom `deco` palette.
+
+Custom renderers must style their own content. External menu portal containers need
+`azgrid-scope`, the matching `azgrid-theme-<name>` class and the host variables.

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,150 @@
+/** @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) {
+	act(() => root.render(React.createElement(AzGrid, {
+		columns: [], dataSource: [row], contextMenuItems,
+	})));
+}
+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('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/config/generate-theme.cjs

@@ -93,7 +93,7 @@ function tokenFor(selector, prop, literal) {
 	return bg ? 'bg' : /fill|stroke/.test(prop) ? 'muted-fg' : 'fg';
 }
 let css = '/* Token overrides for Inovua 5.10.2. Generated by config/generate-theme.cjs.\n * index.css retains layout and icons. Public tokens are inherited; preset tokens\n * are fallback implementation details. Do not set public defaults on the root. */\n';
-for (const [index, selector] of [[0, '.azgrid-scope, .azgrid, .azgrid-theme-light'], [1, '.azgrid-theme-dark']]) {
+for (const [index, selector] of [[0, '.azgrid-scope, .azgrid, .azgrid-theme-light, .azgrid-context-menu'], [1, '.azgrid-theme-dark']]) {
 	css += `${selector} {\n`;
 	for (const [name, values] of Object.entries(tokens)) css += `\t--azgrid-preset-${name}: ${values[index]};\n`;
 	css += '}\n\n';

package/config/theme-extras.css

@@ -74,23 +74,18 @@
 .azgrid-scope .inovua-react-toolkit-menu {
 	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
 }
-/* Three classes exceed MUI's generated Paper/MenuItem selector specificity. */
-.azgrid-scope .azgrid-context-menu.MuiPaper-root {
-	background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
-	color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+/* 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));
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	box-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
-	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-}
-.azgrid-scope .azgrid-context-menu .MuiTypography-root,
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root {
-	color: inherit;
-	font-family: inherit;
-}
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root:hover,
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root.Mui-focusVisible {
-	background: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
 }
 .azgrid-scope, .azgrid-scope * {
 	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));