@azrico/reactgrid 1.6.2 → 1.6.5

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,19 @@ 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}>
+		<div className={clsx('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)}>
+			{props.contextMenuItems && (
 				<ContextMenu
-					classname="azgrid-context-menu"
+					classname={clsx('azgrid-context-menu', themeClass, props.contextMenuClassName)}
 					menuAnchorEl={menuAnchorEl}
 					menuRow={menuRow}
 					close={update_menuRow}
 					dontAutoClose={false}
 					menu_items={props.contextMenuItems as any}
 				/>
-			</ThemeProvider>
+			)}
 			{props.details_dataSource ? (
 				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
 			) : (