@azrico/reactgrid 1.6.5 → 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.

package/__tests__/context-menu.test.js

@@ -41,9 +41,9 @@ afterEach(() => {
 	jest.restoreAllMocks();
 });
 
-function render(contextMenuItems) {
+function render(contextMenuItems, props = {}) {
 	act(() => root.render(React.createElement(AzGrid, {
-		columns: [], dataSource: [row], contextMenuItems,
+		columns: [], dataSource: [row], contextMenuItems, ...props,
 	})));
 }
 function rightClick(data = rowProps, alreadyHandled = false) {
@@ -131,6 +131,44 @@ test('clicking outside closes the menu', async () => {
 	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);

package/dist/src/hooks/useGridEvents.js

@@ -77,8 +77,11 @@ 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 (event.defaultPrevented || !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;
     }

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)
-  }, props.contextMenuItems && _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.5",
+	"version": "1.6.6",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/hooks/useGridEvents.ts

@@ -74,8 +74,18 @@ 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 (event.defaultPrevented || !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;
 		}

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,13 +224,13 @@ 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)}>
-			{props.contextMenuItems && (
+			{!props.hideContextMenu && props.contextMenuItems && (
 				<ContextMenu
 					classname={clsx('azgrid-context-menu', themeClass, props.contextMenuClassName)}
 					menuAnchorEl={menuAnchorEl}
 					menuRow={menuRow}
 					close={update_menuRow}
-					dontAutoClose={false}
+					dontAutoClose={props.dontAutoCloseContextMenu ?? false}
 					menu_items={props.contextMenuItems as any}
 				/>
 			)}