@azrico/reactgrid 1.3.54 → 1.4.1

package/dist/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/dist/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/dist/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/dist/src/types/types.d.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, TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeFilterValue, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection, TypeComputedProps } from '@inovua/reactdatagrid-community/types';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
@@ -66,6 +66,8 @@ export type AzGridProps = {
     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;

package/dist/src/views/DataGrid.d.ts

@@ -1,6 +1,4 @@
 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 React from 'react';

package/dist/src/views/DataGrid.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.AzGrid = AzGrid;
 exports.default = void 0;
 require("@inovua/reactdatagrid-enterprise/index.css");
-require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
-require("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
 require("../themes/base_styles.css");
 require("../themes/grid.css");
 var _func_grid = require("../func/func_grid");
-var _controls = require("@azrico/controls");
+var _contextMenu = require("@azrico/controls/context-menu");
 var _react = _interopRequireDefault(require("react"));
+var _styles = require("@mui/material/styles");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _reactUseSize = require("react-use-size");
@@ -36,7 +35,8 @@ const defaultOptions = {
 };
 const forcedOptions = {
   idProperty: '__table_id',
-  nodesProperty: '__children'
+  nodesProperty: '__children',
+  theme: 'default-light'
 };
 const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
 /* -------------------------------------------------------------------------- */
@@ -65,8 +65,7 @@ function AzGrid(props) {
       licenseKey: licenseKey,
       editable: props.editable,
       treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-      renderRowDetails: props.RowDetail,
-      theme: props.dark ? 'amber-dark' : 'default-light'
+      renderRowDetails: props.RowDetail
     };
     return {
       ...defaultOptions,
@@ -108,6 +107,20 @@ function AzGrid(props) {
  * @returns
  */
 function DataGridEventsWrapper(props) {
+  var _props$theme;
+  const scopeRef = _react.default.useRef(null);
+  const hostTheme = (0, _styles.useTheme)();
+  // Keep the existing context menu and its portal in this grid's CSS scope.
+  const menuTheme = _react.default.useMemo(() => (0, _styles.createTheme)(hostTheme, {
+    components: {
+      MuiPopper: {
+        defaultProps: {
+          container: () => scopeRef.current
+        }
+      }
+    }
+  }), [hostTheme]);
+  const themeClass = `azgrid-theme-${(_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : props.dark ? 'dark' : 'light'}`;
   /* -------------------------------------------------------------------------- */
   const {
     onRowClick,
@@ -137,13 +150,19 @@ function DataGridEventsWrapper(props) {
   }, [props.static_gridOptions]);
   /* -------------------------------------------------------------------------- */
   //TODO ContextMenu not from mui...
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_controls.ContextMenu, {
+  return _react.default.createElement("div", {
+    ref: scopeRef,
+    className: (0, _clsx.default)('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)
+  }, _react.default.createElement(_styles.ThemeProvider, {
+    theme: menuTheme
+  }, _react.default.createElement(_contextMenu.ContextMenu, {
+    classname: "azgrid-context-menu",
     menuAnchorEl: menuAnchorEl,
     menuRow: menuRow,
     close: update_menuRow,
     dontAutoClose: false,
     menu_items: props.contextMenuItems
-  }), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
+  })), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
     ...props,
     static_gridOptions: static_gridOptions
   }) : _react.default.createElement(DataGridSizeWrapper, {
@@ -157,7 +176,10 @@ function DataGridDetailsWrapper(props) {
   const renderDetailsGrid = ({
     data
   }) => {
+    var _props$theme2;
     return _react.default.createElement(_reactdatagridEnterprise.default, {
+      theme: "default-light",
+      className: (0, _clsx.default)('azgrid', `azgrid-theme-${(_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 ? _props$theme2 : props.dark ? 'dark' : 'light'}`),
       defaultFilterValue: props.details_filter,
       dataSource: details_dataSource,
       columns: cached_details_columns
@@ -170,7 +192,7 @@ function DataGridDetailsWrapper(props) {
     const finalresult = props.static_gridOptions || {};
     finalresult['renderDetailsGrid'] = renderDetailsGrid;
     return finalresult;
-  }, [props.static_gridOptions]);
+  }, [props.static_gridOptions, props.theme, props.dark]);
   return _react.default.createElement(DataGridSizeWrapper, {
     ...props,
     static_gridOptions: static_gridOptions
@@ -229,6 +251,7 @@ function DataGridSearchWrapper(props) {
   }));
 }
 function DataGridCore(props) {
+  var _props$theme3;
   return _react.default.createElement("div", {
     className: (0, _clsx.default)(props.className, 'azgrid-flexed', 'azgrid-flexlayout')
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
@@ -238,7 +261,8 @@ function DataGridCore(props) {
     handle: ref => {
       if (ref) props.gridRef.current = ref.current;
     },
-    className: 'azgrid-flexed',
+    theme: "default-light",
+    className: (0, _clsx.default)('azgrid azgrid-flexed', props.allowChildRows && 'azgrid-tree', `azgrid-theme-${(_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 ? _props$theme3 : props.dark ? 'dark' : 'light'}`),
     columns: props.columns,
     dataSource: props.dataSource
   }), props.children);

package/index.ts

@@ -1,4 +1,6 @@
-export * from './src';
+export * from './src/views/DataGrid';
+export * from './src/types/types';
+export { get_row_id, set_row_id, get_col_name, get_col_header } from './src/func/func_grid';
 
-import { AzGrid } from './src';
+import { AzGrid } from './src/views/DataGrid';
 export default AzGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.3.54",
+	"version": "1.4.1",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -9,6 +9,8 @@
 		"start": "react-scripts start",
 		"build": "tsc && yarn cp_themes && babel dist --out-dir dist",
 		"test": "rem",
+		"check:theme": "node config/check-theme.cjs",
+		"theme:generate": "node config/generate-theme.cjs",
 		"cp_themes": "copyfiles ./src/themes/* ./dist/"
 	},
 	"config-overrides-path": "../../config/config-overrides.js",
@@ -29,7 +31,7 @@
 		"typescript": "^4.8.4"
 	},
 	"dependencies": {
-		"@azrico/controls": "^1.5.92",
+		"@azrico/controls": "1.6.1",
 		"@azrico/object": "^1.4.97",
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
@@ -40,11 +42,12 @@
 		"react-use-size": "^3.0.1"
 	},
 	"peerDependencies": {
-		"@azrico/controls": ">=1.5.12",
-		"@azrico/object": ">=1.4.12",
+		"@azrico/controls": ">=1.6.1",
+		"@azrico/object": ">=1.4.97",
 		"@emotion/react": ">=11.9.3",
 		"@emotion/styled": ">=11.9.3",
 		"@inovua/reactdatagrid-enterprise": ">=5.10.2",
+		"@mui/material": ">=5.0.0 <8.0.0",
 		"clsx": ">=1.2.1",
 		"react": ">=18.2.0",
 		"react-use-size": ">=3.0.1"
@@ -62,4 +65,4 @@
 		]
 	},
 	"packageManager": "yarn@4.10.2"
-}
+}

package/src/example.tsx

@@ -2,6 +2,8 @@ export * from './views/DataGrid';
 
 import AzGrid from './views/DataGrid';
 import React from 'react';
+import './themes/azgrid-theme.css';
+import './themes/example-palettes.css';
 
 const columns = [
 	{
@@ -125,39 +127,52 @@ export function ExampleGrid() {
 	}, []);
 
 	return (
-		<AzGrid
-			delayedSize
-			dark
-			// details_dataSource={details_dataSource}
-			dataSource={dataSource}
-			details_columns={columns}
-			onRowClick={onRowClick}
-			onRowDoubleClick={onRowDoubleClick}
-			allowChildRows
-			// onSelectionChange={onSelectionChange}
-			// selected={selected}
-			contextMenuItems={contextMenuItems as any}
-			customColumns={customColumns}
-			columns={columns}
-			editableColumns={editableColumns}
-			editable={true}
-			onEditComplete={onEditComplete}
-			advancedFilterFields={['name']}
-			// leftColumns={leftColumns}
-			gridOptions={
-				{
-					// defaultFilterValue: filterValue,
-					// remoteFilter: false,
-					// multiSelect: true,
-					// pagination: 'local',
-					// defaultLimit: 100,
-					// limit: 100,
-					// pageSizes: [100],
-					// rowIndexColumn: true,
-					// checkboxColumn: true,
-				}
-			}
-		/>
+		<div style={{ display: 'grid', gap: 20, height: '100%', overflow: 'auto' }}>
+			{['light', 'dark', 'deco'].map((theme) => (
+				<section key={theme} className={theme === 'deco' ? 'azgrid-example-deco' : undefined} style={{ height: 360, display: 'flex', flexDirection: 'column' }}>
+					<h3>{theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`}</h3>
+					<AzGrid
+						theme={theme}
+						delayedSize
+						// details_dataSource={details_dataSource}
+						dataSource={dataSource}
+						details_columns={columns}
+						onRowClick={onRowClick}
+						onRowDoubleClick={onRowDoubleClick}
+						allowChildRows
+						// onSelectionChange={onSelectionChange}
+						// selected={selected}
+						contextMenuItems={contextMenuItems as any}
+						customColumns={customColumns}
+						columns={columns}
+						editableColumns={editableColumns}
+						editable={true}
+						onEditComplete={onEditComplete}
+						advancedFilterFields={['name']}
+						// leftColumns={leftColumns}
+						gridOptions={
+							{
+								defaultFilterValue: [{ name: 'name', operator: 'contains', type: 'string', value: '' }],
+								pagination: 'local',
+								defaultLimit: 10,
+								pageSizes: [10, 25, 50],
+								checkboxColumn: true,
+								multiSelect: true,
+								// defaultFilterValue: filterValue,
+								// remoteFilter: false,
+								// multiSelect: true,
+								// pagination: 'local',
+								// defaultLimit: 100,
+								// limit: 100,
+								// pageSizes: [100],
+								// rowIndexColumn: true,
+								// checkboxColumn: true,
+							}
+						}
+					/>
+				</section>
+			))}
+		</div>
 	);
 }
 export default ExampleGrid;

package/src/index.tsx

@@ -4,7 +4,6 @@ export * from './types/types';
 export { get_row_id, set_row_id, get_col_name, get_col_header } from './func/func_grid';
 
 import AzGrid from './views/DataGrid';
-import ExampleGrid from './example';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -12,8 +11,9 @@ import ReactDOM from 'react-dom/client';
 //
 export default AzGrid;
 
-const testroot = document.getElementById('testroot');
+const testroot = typeof document === 'undefined' ? null : document.getElementById('testroot');
 if (testroot) {
-	const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
-	root.render(<ExampleGrid />);
+	const root = ReactDOM.createRoot(testroot);
+	// Example styles, including the optional token theme, load only for the demo.
+	import('./example').then(({ default: ExampleGrid }) => root.render(<ExampleGrid />));
 }