@azrico/reactgrid 1.6.1 → 1.6.4

package/src/hooks/useGridEvents.ts

@@ -7,6 +7,7 @@ import {
 	apply_row_a11y,
 	get_grid_root,
 	get_root_a11y_key,
+	has_unsynced_header,
 	is_grid_busy,
 } from '../func/func_a11y';
 
@@ -53,16 +54,17 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 	const onRowClick = React.useCallback((rowProps, event) => {
 		const { onRowClick, onRowDoubleClick } = latestProps.current;
 		const nowDate = Date.now();
-		const lastclick: number = click_data.current[get_row_id(rowProps)];
+		const rowId = get_row_id(rowProps.data);
+		const lastclick: number = click_data.current[rowId];
 		if (lastclick) {
 			const diffTime = Math.abs(nowDate - lastclick);
 			if (diffTime < 400) {
-				click_data.current[get_row_id(rowProps)] = null;
+				click_data.current[rowId] = null;
 				return onRowDoubleClick && onRowDoubleClick(rowProps.rowIndex, rowProps.data);
 			}
 		}
 
-		click_data.current[get_row_id(rowProps)] = nowDate;
+		click_data.current[rowId] = nowDate;
 		return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
 	}, []);
 
@@ -97,7 +99,7 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 		ariaLabel: latestProps.current.ariaLabel,
 		editable: !!latestProps.current.editable,
 	});
-	// root attributes are set on the DOM node, batched to once per frame
+	// root and header cell attributes are set on the DOM nodes, batched to once per frame
 	const scheduleRootSync = React.useCallback((force = false) => {
 		if (rootSyncFrame.current || typeof requestAnimationFrame === 'undefined') return;
 		const grid = latestProps.current.liveGridRef?.current?.current;
@@ -106,7 +108,8 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 			!force &&
 			key &&
 			key === lastRoot.current.key &&
-			get_grid_root(grid) === lastRoot.current.el
+			get_grid_root(grid) === lastRoot.current.el &&
+			!has_unsynced_header(lastRoot.current.el)
 		)
 			return;
 		rootSyncFrame.current = requestAnimationFrame(() => {

package/src/themes/azgrid-theme.css

@@ -1,7 +1,7 @@
 /* Token overrides for Inovua 5.10.2. Generated by config/generate-theme.cjs.
  * index.css retains layout and icons. Public tokens are inherited; preset tokens
  * are fallback implementation details. Do not set public defaults on the root. */
-.azgrid-scope, .azgrid, .azgrid-theme-light {
+.azgrid-scope, .azgrid, .azgrid-theme-light, .azgrid-context-menu {
 	--azgrid-preset-bg: #fff;
 	--azgrid-preset-fg: #555e68;
 	--azgrid-preset-border: #e4e3e2;
@@ -2010,23 +2010,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));

package/src/types/types.ts

@@ -1,153 +1,157 @@
-import { ModifyFields } from '../func/func_grid';
-import { ConvertableToMenuItem } from '@azrico/controls/context-menu';
-import React from 'react';
-import {
-	TypeCellSelection,
-	TypeColumn,
-	TypeDataGridProps,
-	TypeDataSource,
-	TypeEditInfo,
-	TypeFilterTypes,
-	TypeFilterValue,
-	TypeRowDetailsInfo,
-	TypeRowProps,
-	TypeRowSelection,
-	TypeComputedProps,
-	TypeSortInfo,
-	TypeGroupBy,
-} from '@inovua/reactdatagrid-community/types';
-
-import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
-
-/* -------------------------------------------------------------------------- */
-export type ColumnDefinition = TypeColumn;
-export type CellDefinition = any;
-export type RowDefinition = any;
-export type RowProps = TypeRowProps;
-export type RowSelectionValue = TypeRowSelection;
-export type CellSelectionValue = TypeCellSelection;
-export type DataRowDefinition = any;
-export type FilterTypes = TypeFilterTypes;
-export type FilterValues = TypeFilterValue;
-export type DataSourceDefinition = TypeDataSource;
-export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
-export type OnCellSelectionChangeFunc = (s: { [key: string]: boolean }) => void;
-export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
-
-export type loose_column_names = {
-	key: string;
-	field: string;
-	columnName: string;
-	name: string;
-};
-export type loose_column_fields = loose_column_names & {
-	title: string;
-	type: string;
-	items: any[];
-	/** accessible name for cells whose visible text isn't descriptive (icons, badges, ...), set as aria-label */
-	ariaLabel: (value: any, data: any) => string;
-};
-export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
-//
-
-export type CustomColumnDefinition = {
-	name: string;
-	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
-};
-export type AzGridOptions = Partial<TypeDataGridProps> & {
-	/** called for every rendered row, after the grid's own row attributes are set */
-	onRenderRow?: (rowProps: any) => void;
-	/** extra DOM props for the header row */
-	headerProps?: { [key: string]: any };
-};
-/** arguments passed to a dataSource function */
-export type AzDataSourceParams = {
-	skip?: number;
-	limit?: number;
-	/** current header filters, filter.value is an array of selected ids for a multi-select SelectFilter */
-	filterValue?: TypeFilterValue;
-	sortInfo?: TypeSortInfo;
-	groupBy?: TypeGroupBy;
-	cached_data: React.MutableRefObject<any>;
-	last_cache_info: React.MutableRefObject<any>;
-};
-export type AzDataSourceFunc = (args: AzDataSourceParams) => any[] | Promise<any[] | any>;
-/* -------------------------------------------------------------------------- */
-export type AzGridProps = {
-	dataSource?: any[] | AzDataSourceFunc;
-	details_dataSource?: any[] | AzDataSourceFunc; //details is rendered under each row
-	details_columns?: LooseColumnDefinition[];
-	details_filter?: FilterValues;
-
-	licenseKey?: string;
-	/** accessible name of the grid, set as aria-label on the grid root */
-	ariaLabel?: string;
-
-	gridRef?: React.MutableRefObject<TypeComputedProps>;
-	gridOptions?: AzGridOptions;
-
-	columns?: LooseColumnDefinition[];
-	columnExtensions?: Partial<LooseColumnDefinition>;
-
-	editableColumns?: string[];
-	leftColumns?: string[];
-	rightColumns?: string[];
-	customColumns?: CustomColumnDefinition[];
-
-	contextMenuItems?: ConvertableToMenuItem;
-
-	highlightedRow?: any;
-	RowDetail?: RowDetailsFunc;
-
-	selected?: RowSelectionValue;
-	cellSelection?: CellSelectionValue;
-	/* -------------------------------------------------------------------------- */
-	onEditComplete?: (editInfo: TypeEditInfo) => void;
-	onSelectionChange?: OnSelectionChangeFunc;
-	onCellSelectionChange?: OnCellSelectionChangeFunc;
-
-	onRowClick?: (rowIndex: number, row: any) => void;
-	onRowDoubleClick?: (rowIndex: number, row: any) => void;
-	onLimitChange?: (v: number) => void;
-	onSkipChange?: (v: number) => void;
-	/* -------------------------------------------------------------------------- */
-	skip?: number;
-	limit?: number;
-	//
-	editable?: boolean | ((editValue: any, cellProps: any) => boolean);
-	advancedFilterFields?: string[];
-	/** Label of the quick-search box shown with `advancedFilterFields`. Default "Search". */
-	advancedFilterLabel?: React.ReactNode;
-	/** Placeholder of the quick-search input. A string is used as the native placeholder, any other node (custom HTML) is shown over the empty input. */
-	advancedFilterPlaceholder?: React.ReactNode;
-	//
-
-	loading?: boolean;
-	theme?: 'light' | 'dark' | (string & {});
-	/** @deprecated Use theme="dark" or theme="light" instead. */
-	dark?: boolean;
-	delayedSize?: boolean;
-	allowChildRows?: boolean;
-	looseCacheCheck?: boolean;
-	className?: string;
-};
-
-export type DataGridProps = ModifyFields<
-	AzGridProps,
-	{
-		columns: ColumnDefinition[];
-		dataSource: any;
-	}
->;
-export type GridType = TypeComputedProps;
-export type DataGridWrapperProps = ModifyFields<
-	DataGridProps,
-	{
-		gridRef: React.MutableRefObject<TypeComputedProps>;
-		/** internal: inovua's live computed props ref (gridRef holds a snapshot) */
-		liveGridRef: React.MutableRefObject<React.MutableRefObject<TypeComputedProps> | null>;
-		static_gridOptions: AzGridOptions;
-		dynamic_gridOptions: AzGridOptions;
-		children?: React.ReactNode;
-	}
->;
+import { ModifyFields } from '../func/func_grid';
+import { ConvertableToMenuItem } from '@azrico/controls/context-menu';
+import React from 'react';
+import {
+	TypeCellSelection,
+	TypeColumn,
+	TypeDataGridProps,
+	TypeDataSource,
+	TypeEditInfo,
+	TypeFilterTypes,
+	TypeFilterValue,
+	TypeRowDetailsInfo,
+	TypeRowProps,
+	TypeRowSelection,
+	TypeComputedProps,
+	TypeSortInfo,
+	TypeGroupBy,
+} from '@inovua/reactdatagrid-community/types';
+
+import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
+
+/* -------------------------------------------------------------------------- */
+export type ColumnDefinition = TypeColumn;
+export type CellDefinition = any;
+export type RowDefinition = any;
+export type RowProps = TypeRowProps;
+export type RowSelectionValue = TypeRowSelection;
+export type CellSelectionValue = TypeCellSelection;
+export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
+export type FilterValues = TypeFilterValue;
+export type DataSourceDefinition = TypeDataSource;
+export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
+export type OnCellSelectionChangeFunc = (s: { [key: string]: boolean }) => void;
+export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
+
+export type loose_column_names = {
+	key: string;
+	field: string;
+	columnName: string;
+	name: string;
+};
+export type loose_column_fields = loose_column_names & {
+	title: string;
+	type: string;
+	items: any[];
+	/** accessible name for cells whose visible text isn't descriptive (icons, badges, ...), set as aria-label */
+	ariaLabel: (value: any, data: any) => string;
+};
+export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
+//
+
+export type CustomColumnDefinition = {
+	name: string;
+	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
+};
+export type AzGridOptions = Partial<TypeDataGridProps> & {
+	/** called for every rendered row, after the grid's own row attributes are set */
+	onRenderRow?: (rowProps: any) => void;
+	/** extra DOM props for the header row */
+	headerProps?: { [key: string]: any };
+};
+/** arguments passed to a dataSource function */
+export type AzDataSourceParams = {
+	skip?: number;
+	limit?: number;
+	/** current header filters, filter.value is an array of selected ids for a multi-select SelectFilter */
+	filterValue?: TypeFilterValue;
+	sortInfo?: TypeSortInfo;
+	groupBy?: TypeGroupBy;
+	cached_data: React.MutableRefObject<any>;
+	last_cache_info: React.MutableRefObject<any>;
+};
+export type AzDataSourceFunc = (args: AzDataSourceParams) => any[] | Promise<any[] | any>;
+/* -------------------------------------------------------------------------- */
+export type AzGridProps = {
+	dataSource?: any[] | AzDataSourceFunc;
+	details_dataSource?: any[] | AzDataSourceFunc; //details is rendered under each row
+	details_columns?: LooseColumnDefinition[];
+	details_filter?: FilterValues;
+
+	licenseKey?: string;
+	/** accessible name of the grid, set as aria-label on the grid root */
+	ariaLabel?: string;
+
+	gridRef?: React.MutableRefObject<TypeComputedProps>;
+	gridOptions?: AzGridOptions;
+
+	columns?: LooseColumnDefinition[];
+	columnExtensions?: Partial<LooseColumnDefinition>;
+
+	editableColumns?: string[];
+	leftColumns?: string[];
+	rightColumns?: string[];
+	customColumns?: CustomColumnDefinition[];
+
+	contextMenuItems?: ConvertableToMenuItem;
+	/** Extra classes on the row context menu, which is portaled to <body> */
+	contextMenuClassName?: string;
+
+	highlightedRow?: any;
+	RowDetail?: RowDetailsFunc;
+
+	selected?: RowSelectionValue;
+	cellSelection?: CellSelectionValue;
+	/* -------------------------------------------------------------------------- */
+	onEditComplete?: (editInfo: TypeEditInfo) => void;
+	onSelectionChange?: OnSelectionChangeFunc;
+	onCellSelectionChange?: OnCellSelectionChangeFunc;
+
+	onRowClick?: (rowIndex: number, row: any) => void;
+	onRowDoubleClick?: (rowIndex: number, row: any) => void;
+	onLimitChange?: (v: number) => void;
+	onSkipChange?: (v: number) => void;
+	/* -------------------------------------------------------------------------- */
+	skip?: number;
+	limit?: number;
+	//
+	editable?: boolean | ((editValue: any, cellProps: any) => boolean);
+	advancedFilterFields?: string[];
+	/** Label of the quick-search box shown with `advancedFilterFields`. Default "Search". */
+	advancedFilterLabel?: React.ReactNode;
+	/** Placeholder of the quick-search input. A string is used as the native placeholder, any other node (custom HTML) is shown over the empty input. */
+	advancedFilterPlaceholder?: React.ReactNode;
+	//
+
+	loading?: boolean;
+	theme?: 'light' | 'dark' | (string & {});
+	/** @deprecated Use theme="dark" or theme="light" instead. */
+	dark?: boolean;
+	delayedSize?: boolean;
+	allowChildRows?: boolean;
+	looseCacheCheck?: boolean;
+	className?: string;
+	/** rendered after the grid, inside its container */
+	children?: React.ReactNode;
+};
+
+export type DataGridProps = ModifyFields<
+	AzGridProps,
+	{
+		columns: ColumnDefinition[];
+		dataSource: any;
+	}
+>;
+export type GridType = TypeComputedProps;
+export type DataGridWrapperProps = ModifyFields<
+	DataGridProps,
+	{
+		gridRef: React.MutableRefObject<TypeComputedProps>;
+		/** internal: inovua's live computed props ref (gridRef holds a snapshot) */
+		liveGridRef: React.MutableRefObject<React.MutableRefObject<TypeComputedProps> | null>;
+		static_gridOptions: AzGridOptions;
+		dynamic_gridOptions: AzGridOptions;
+		children?: React.ReactNode;
+	}
+>;

package/src/views/DataGrid.tsx

@@ -4,7 +4,6 @@ import '../themes/grid.css';
 import { get_default_key } from '../func/func_grid';
 import { ContextMenu } from '@azrico/controls/context-menu';
 import React from 'react';
-import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
 import clsx from 'clsx';
@@ -16,6 +15,8 @@ import { useColumnData } from '../hooks/useColumnData';
 import { useDataSource } from '../hooks/useDatasource';
 import { useGridSearch } from '../hooks/useGridSearch';
 import { apply_column_a11y } from '../func/func_a11y';
+import { id as rowIndexColumnId } from '@inovua/reactdatagrid-community/normalizeColumns/defaultRowIndexColumnId';
+import { id as checkboxColumnId } from '@inovua/reactdatagrid-community/normalizeColumns/defaultCheckColumnId';
 /* -------------------------------------------------------------------------- */
 
 /* -------------------------------------------------------------------------- */
@@ -152,15 +153,6 @@ export function AzGrid(props: AzGridProps) {
  * @returns
  */
 function DataGridEventsWrapper(props: DataGridWrapperProps) {
-	const scopeRef = React.useRef<HTMLDivElement>(null);
-	const hostTheme = useTheme();
-	// Keep the existing context menu and its portal in this grid's CSS scope.
-	const menuTheme = React.useMemo(
-		() => createTheme(hostTheme, {
-			components: { MuiPopper: { defaultProps: { container: () => scopeRef.current } } },
-		}),
-		[hostTheme]
-	);
 	const themeClass = `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`;
 	/* -------------------------------------------------------------------------- */
 	const {
@@ -204,13 +196,13 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 			headerProps: { role: 'row', 'aria-rowindex': 1, ...opts.headerProps },
 			rowIndexColumn: apply_column_a11y(
 				typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {},
-				{ role: 'rowheader', gridEditable }
+				{ role: 'rowheader', gridEditable, id: rowIndexColumnId }
 			),
 		};
 		if (opts.checkboxColumn)
 			a11yProps.checkboxColumn = apply_column_a11y(
 				typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {},
-				{ gridEditable, markReadonly: false }
+				{ gridEditable, markReadonly: false, id: checkboxColumnId }
 			);
 
 		return {
@@ -229,19 +221,17 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	]);
 
 	/* -------------------------------------------------------------------------- */
-	//TODO ContextMenu not from mui...
+	// The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
 	return (
-		<div ref={scopeRef} className={clsx('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)}>
-			<ThemeProvider theme={menuTheme}>
-				<ContextMenu
-					classname="azgrid-context-menu"
-					menuAnchorEl={menuAnchorEl}
-					menuRow={menuRow}
-					close={update_menuRow}
-					dontAutoClose={false}
-					menu_items={props.contextMenuItems as any}
-				/>
-			</ThemeProvider>
+		<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.details_dataSource ? (
 				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
 			) : (