@azrico/reactgrid 1.3.52 → 1.4.0

package/src/themes/base_styles.css

@@ -19,8 +19,9 @@
 	display: flex;
 	flex-direction: column;
 }
-.azgrid-testborder {
-	border: 3px solid red;
+.azgrid-scope {
+	min-height: 0;
+	min-width: 0;
 }
 .azgrid-pad50px {
 	padding: 50px;

package/src/themes/example-palettes.css

@@ -0,0 +1,49 @@
+/* Example host preset; separate from the neutral grid theme. */
+.azgrid-example-deco, .azgrid-theme-deco {
+	--azgrid-bg: #0A0A0A;
+	--azgrid-fg: #eee7d6;
+	--azgrid-border: #6b5824;
+	--azgrid-accent: #D4AF37;
+	--azgrid-muted-fg: #9b8a5b;
+	--azgrid-radius: 0;
+	--azgrid-font-family: Georgia, serif;
+	--azgrid-header-bg: #0A0A0A;
+	--azgrid-header-fg: #D4AF37;
+	--azgrid-header-border: #6b5824;
+	--azgrid-header-text-transform: uppercase;
+	--azgrid-header-letter-spacing: .1em;
+	--azgrid-header-font-weight: 600;
+	--azgrid-row-bg-even: #0A0A0A;
+	--azgrid-row-bg-odd: #12110e;
+	--azgrid-row-bg-hover: #282211;
+	--azgrid-row-fg-hover: #fff6dc;
+	--azgrid-row-bg-selected: #423619;
+	--azgrid-row-fg-selected: #fff6dc;
+	--azgrid-row-bg-active: #332a15;
+	--azgrid-cell-border: #6b5824;
+	--azgrid-cell-border-width: 1px;
+	--azgrid-cell-padding: 0 10px;
+	--azgrid-filter-bg: #12110e;
+	--azgrid-filter-fg: #eee7d6;
+	--azgrid-filter-border: #6b5824;
+	--azgrid-filter-placeholder: #9b8a5b;
+	--azgrid-filter-focus-ring: #D4AF37;
+	--azgrid-pagination-bg: #0A0A0A;
+	--azgrid-pagination-fg: #D4AF37;
+	--azgrid-pagination-border: #6b5824;
+	--azgrid-menu-bg: #12110e;
+	--azgrid-menu-fg: #eee7d6;
+	--azgrid-menu-border: #6b5824;
+	--azgrid-menu-bg-hover: #282211;
+	--azgrid-scrollbar-track: #0A0A0A;
+	--azgrid-scrollbar-thumb: #6b5824;
+	--azgrid-empty-bg: #0A0A0A;
+	--azgrid-empty-fg: #9b8a5b;
+	--azgrid-loading-bg: rgba(10, 10, 10, .85);
+	--azgrid-loading-fg: #D4AF37;
+	--azgrid-tree-bg: #12110e;
+	--azgrid-tree-fg: #D4AF37;
+	--azgrid-details-bg: #12110e;
+	--azgrid-shadow-color: rgba(0, 0, 0, .6);
+	--azgrid-locked-column-shadow: 0 0 5px #6b5824;
+}

package/src/themes/grid.css

@@ -1,85 +1,17 @@
-.InovuaReactDataGrid {
-	z-index: 1000;
-	font-family: 'Nunito Sans', 'Iran Sans', sans-serif;
-}
-
-.InovuaReactDataGrid {
-	--grid-bg: oklch(var(--b1, 100% 0 106));
-	--grid-fg: oklch(var(--bc, 23.5% 0 0));
-	--grid-bg-hover: oklch(var(--b2, 94.75% 0.014 277.06));
-	--grid-bg-hover2: oklch(var(--b3, 94.75% 0.014 277.06));
-	--grid-fg-hover: oklch(var(--bc, 23.5% 0 0));
-}.InovuaReactDataGrid--theme-amber-dark {
-	--grid-bg: #313943;
-	--grid-fg: #c5cae9;
-	--grid-bg-hover: oklch(var(--b2, 40.8% 0.011 128.75));
-	--grid-fg-hover: #ececec;
-}
-.InovuaReactDataGrid__row {
-	color: var(--grid-fg);
-	border-top-width: 1px;
-}
-.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--odd {
-	background-color: #fafafa;
-}
-.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--even {
-	background-color: #fff;
-}
-/* --------------------------- selected row color --------------------------- */
-.InovuaReactDataGrid
-	.InovuaReactDataGrid__row--active
-	.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background),
-.InovuaReactDataGrid
-	.InovuaReactDataGrid__row--active.InovuaReactDataGrid__row--even
-	.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background),
-.InovuaReactDataGrid
-	.InovuaReactDataGrid__row--active.InovuaReactDataGrid__row--odd
-	.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
-	color: var(--grid-fg-hover);
-}
-/* ----------------------------- hover row color ---------------------------- */
-.InovuaReactDataGrid--show-hover-rows
-	.InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--scrolling):not(
-		.InovuaReactDataGrid__row--empty
-	)
-	.InovuaReactDataGrid__row-hover-target:hover {
-	background: var(--grid-bg-hover) !important;
-	color: var(--grid-fg-hover) !important;
-}
-.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows
-	.InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(
-		.InovuaReactDataGrid__row--empty
-	)
-	.InovuaReactDataGrid__row-hover-target:hover
-	.InovuaReactDataGrid__row-index-column,
-.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows
-	.InovuaReactDataGrid__row-hover-target:hover
-	.InovuaReactDataGrid__row-index-column {
-	background: var(--grid-bg-hover2) !important;
-}
-/* -------------------------------------------------------------------------- */
-.inovua-react-toolkit-text-input {
-	font-family: inherit;
-}
-.inovua-react-toolkit-text-input input {
-	font-family: inherit;
-}
-
-.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
-	height: 100%;
-	display: flex;
-	align-items: center;
-}
-.InovuaReactDataGrid__column-header__content {
-	text-overflow: clip;
-}
-
-.InovuaReactDataGrid__row.deleted:after {
-	position: absolute;
-	content: '';
-	left: 5px;
-	top: 50%;
-	right: 5px;
-	border-top: 1.5px solid;
-	border-color: gray;
+.InovuaReactDataGrid { z-index: 1000; }
+.inovua-react-toolkit-text-input,
+.inovua-react-toolkit-text-input input { font-family: inherit; }
+.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+.InovuaReactDataGrid__column-header__content { text-overflow: clip; }
+.InovuaReactDataGrid__row.deleted:after {
+	position: absolute;
+	content: '';
+	left: 5px;
+	top: 50%;
+	right: 5px;
+	border-top: 1.5px solid;
 }

package/src/types/types.ts

@@ -1,122 +1,124 @@
-import { ModifyFields } from '../func/func_grid';
-import { ConvertableToMenuItem } from '@azrico/controls';
-import React from 'react';
-import {
-	TypeCellSelection,
-	TypeColumn,
-	TypeDataGridProps,
-	TypeDataSource,
-	TypeEditInfo,
-	TypeFilterTypes,
-	TypeFilterValue,
-	TypeRowDetailsInfo,
-	TypeRowProps,
-	TypeRowSelection,
-	TypeComputedProps,
-} 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[];
-};
-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>;
-/* -------------------------------------------------------------------------- */
-export type AzGridProps = {
-	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
-	details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>); //details is rendered under each row
-	details_columns?: LooseColumnDefinition[];
-	details_filter?: FilterValues;
-
-	licenseKey?: 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[];
-	//
-
-	loading?: boolean;
-	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>;
-		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,
+} 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[];
+};
+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>;
+/* -------------------------------------------------------------------------- */
+export type AzGridProps = {
+	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+	details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>); //details is rendered under each row
+	details_columns?: LooseColumnDefinition[];
+	details_filter?: FilterValues;
+
+	licenseKey?: 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[];
+	//
+
+	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>;
+		static_gridOptions: AzGridOptions;
+		dynamic_gridOptions: AzGridOptions;
+		children?: React.ReactNode;
+	}
+>;

package/src/views/DataGrid.tsx

@@ -1,19 +1,15 @@
 import '@inovua/reactdatagrid-enterprise/index.css';
-import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
-import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
 import '../themes/base_styles.css';
 import '../themes/grid.css';
-import { applyColumnData, ApplyDataSource, get_default_key } from '../func/func_grid';
-import { ContextMenu } from '@azrico/controls';
+import { get_default_key } from '../func/func_grid';
+import { ContextMenu } from '@azrico/controls/context-menu';
 import React from 'react';
-
-import { array_intersection, fn_eval } from '@azrico/object';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
 import clsx from 'clsx';
 import { useComponentSize } from 'react-use-size';
 
-import debounce from 'lodash.debounce';
 import { AzGridOptions, AzGridProps, DataGridWrapperProps } from '../types/types';
 import { useGridEvents } from '../hooks/useGridEvents';
 import { useColumnData } from '../hooks/useColumnData';
@@ -37,6 +33,7 @@ const defaultOptions: AzGridOptions = {
 const forcedOptions: AzGridOptions = {
 	idProperty: '__table_id',
 	nodesProperty: '__children',
+	theme: 'default-light',
 };
 
 const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
@@ -70,7 +67,6 @@ export function AzGrid(props: AzGridProps) {
 			editable: props.editable as any, //bug in types of the plugin
 			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
 			renderRowDetails: props.RowDetail,
-			theme: props.dark ? 'amber-dark' : 'default-light',
 		};
 		return { ...defaultOptions, ...events, ...extra_ops };
 	}, [
@@ -126,6 +122,16 @@ 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 {
 		onRowClick,
@@ -158,20 +164,23 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	/* -------------------------------------------------------------------------- */
 	//TODO ContextMenu not from mui...
 	return (
-		<>
-			<ContextMenu
-				menuAnchorEl={menuAnchorEl}
-				menuRow={menuRow}
-				close={update_menuRow}
-				dontAutoClose={false}
-				menu_items={props.contextMenuItems as any}
-			/>
+		<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>
 			{props.details_dataSource ? (
 				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
 			) : (
 				<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />
 			)}
-		</>
+		</div>
 	);
 }
 
@@ -181,6 +190,8 @@ function DataGridDetailsWrapper(props: DataGridWrapperProps) {
 	const renderDetailsGrid = ({ data }) => {
 		return (
 			<ReactDataGrid
+				theme="default-light"
+				className={clsx('azgrid', `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`)}
 				defaultFilterValue={props.details_filter}
 				dataSource={details_dataSource}
 				columns={cached_details_columns}
@@ -195,7 +206,7 @@ function DataGridDetailsWrapper(props: DataGridWrapperProps) {
 		const finalresult = props.static_gridOptions || {};
 		finalresult['renderDetailsGrid'] = renderDetailsGrid;
 		return finalresult;
-	}, [props.static_gridOptions]);
+	}, [props.static_gridOptions, props.theme, props.dark]);
 
 	return <DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />;
 }
@@ -253,7 +264,12 @@ function DataGridCore(props: DataGridWrapperProps) {
 				handle={(ref) => {
 					if (ref) props.gridRef.current = ref.current as any;
 				}}
-				className={'azgrid-flexed'}
+				theme="default-light"
+				className={clsx(
+					'azgrid azgrid-flexed',
+					props.allowChildRows && 'azgrid-tree',
+					`azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`
+				)}
 				columns={props.columns}
 				dataSource={props.dataSource}
 			/>

package/src/views/index.ts

@@ -1,4 +1,4 @@
-export * from './DataGrid';
-
-import AzGrid from './DataGrid';
-export default AzGrid;
+export * from './DataGrid';
+
+import AzGrid from './DataGrid';
+export default AzGrid;