@azrico/reactgrid 1.3.54 → 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,92 +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 {
-	border: none !important;
-	border-top-width: 0 !important;
-	border-bottom-width: 0 !important;
-	color: var(--grid-fg);
-}
-.InovuaReactDataGrid__cell {
-	border: 0.1px solid rgba(1, 1, 1, 0.1) !important ;
-}
-.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,5 +1,5 @@
 import { ModifyFields } from '../func/func_grid';
-import { ConvertableToMenuItem } from '@azrico/controls';
+import { ConvertableToMenuItem } from '@azrico/controls/context-menu';
 import React from 'react';
 import {
 	TypeCellSelection,
@@ -96,6 +96,8 @@ export type AzGridProps = {
 	//
 
 	loading?: boolean;
+	theme?: 'light' | 'dark' | (string & {});
+	/** @deprecated Use theme="dark" or theme="light" instead. */
 	dark?: boolean;
 	delayedSize?: boolean;
 	allowChildRows?: boolean;

package/src/views/DataGrid.tsx

@@ -1,11 +1,10 @@
 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 { get_default_key } from '../func/func_grid';
-import { ContextMenu } from '@azrico/controls';
+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';
@@ -34,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'];
@@ -67,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 };
 	}, [
@@ -123,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,
@@ -155,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>
 	);
 }
 
@@ -178,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}
@@ -192,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} />;
 }
@@ -250,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}
 			/>