@azrico/reactgrid 1.3.54 → 1.4.1

package/README.md

@@ -1,3 +1,137 @@
-**DISCLAIMER :**
-DO NOT USE THIS PACKAGE FOR ANY REASON
-THIS IS A PRIVATE PACKAGE
+# @azrico/reactgrid
+
+Private React data grid package for Azrideus' projects.
+
+## Usage
+
+```tsx
+import { AzGrid } from '@azrico/reactgrid';
+import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
+
+const columns = [{ name: 'name', header: 'Name', defaultFlex: 1 }];
+const rows = [{ __table_id: '1', name: 'Alice' }];
+
+<AzGrid theme="light" columns={columns} dataSource={rows} />;
+```
+
+The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
+
+## Themes
+
+Use `theme="light"` (default), `theme="dark"`, or a custom name. Custom names apply
+`azgrid-theme-<name>` to the grid and use light defaults for unspecified variables.
+
+`dark` remains a deprecated alias. `theme` takes precedence; `gridOptions.theme` is ignored.
+
+Set `--azgrid-*` variables on a wrapper, `:root`, or a theme class. Each grid can use a different palette.
+
+```tsx
+<div className="my-grid">
+  <AzGrid theme="light" columns={columns} dataSource={rows} />
+</div>
+```
+
+```css
+.my-grid {
+  --azgrid-accent: #345b93;
+  --azgrid-header-bg: #edf2f8;
+  --azgrid-row-bg-hover: #e4ecf7;
+}
+```
+
+## CSS variables
+
+All variables have light/dark defaults. Use valid CSS values for the named property.
+`--azgrid-locked-column-shadow` accepts a complete `box-shadow` value.
+
+<!-- azgrid-tokens -->
+| Variable | Controls |
+| --- | --- |
+| `--azgrid-bg` | Grid background |
+| `--azgrid-fg` | Grid text |
+| `--azgrid-border` | Grid border and separators |
+| `--azgrid-font-family` | Grid and control fonts |
+| `--azgrid-radius` | Grid, input and menu corner radius; default `0` |
+| `--azgrid-accent` | Focus, sort arrows, checkboxes and selection handles |
+| `--azgrid-transparent` | Transparent structural surfaces |
+| `--azgrid-muted-fg` | Disabled text and secondary icons |
+| `--azgrid-shadow-color` | Menu and input shadow colour |
+| `--azgrid-header-bg` | Header background |
+| `--azgrid-header-fg` | Header text |
+| `--azgrid-header-border` | Header separators |
+| `--azgrid-header-font-size` | Header font size |
+| `--azgrid-header-text-transform` | Header text transform |
+| `--azgrid-header-letter-spacing` | Header letter spacing |
+| `--azgrid-header-font-weight` | Header font weight |
+| `--azgrid-row-bg-even` | Even and non-zebra rows |
+| `--azgrid-row-bg-odd` | Odd rows |
+| `--azgrid-row-bg-hover` | Hovered rows and cells |
+| `--azgrid-row-fg-hover` | Hovered row text |
+| `--azgrid-row-bg-selected` | Selected rows and cells |
+| `--azgrid-row-fg-selected` | Selected row text |
+| `--azgrid-row-bg-active` | Active rows |
+| `--azgrid-cell-border` | Cell border colour |
+| `--azgrid-cell-border-width` | Cell border width |
+| `--azgrid-cell-padding` | Data cell padding |
+| `--azgrid-filter-bg` | Filter row, input, editor and search background |
+| `--azgrid-filter-fg` | Filter input and editor text |
+| `--azgrid-filter-border` | Filter input borders |
+| `--azgrid-filter-placeholder` | Input placeholder text |
+| `--azgrid-filter-focus-ring` | Focused input border and ring |
+| `--azgrid-pagination-bg` | Pagination toolbar and control background |
+| `--azgrid-pagination-fg` | Pagination text and icons |
+| `--azgrid-pagination-border` | Pagination control borders |
+| `--azgrid-menu-bg` | Menu, select dropdown and date picker background |
+| `--azgrid-menu-fg` | Menu text and icons |
+| `--azgrid-menu-border` | Menu borders and separators |
+| `--azgrid-menu-bg-hover` | Hovered and focused menu entries |
+| `--azgrid-scrollbar-track` | Scrollbar tracks |
+| `--azgrid-scrollbar-thumb` | Scrollbar thumbs |
+| `--azgrid-empty-bg` | Empty state background |
+| `--azgrid-empty-fg` | Empty state text |
+| `--azgrid-loading-bg` | Loading overlay background |
+| `--azgrid-loading-fg` | Loading text and spinner |
+| `--azgrid-tree-bg` | Tree and group row background |
+| `--azgrid-tree-fg` | Tree and group text and expand icons |
+| `--azgrid-details-bg` | Row details background |
+| `--azgrid-locked-column-shadow` | Locked column shadow |
+<!-- /azgrid-tokens -->
+
+## Art Deco example
+
+Use dark defaults with an obsidian background, gold accents, square corners and uppercase headers.
+
+```tsx
+<div className="deco-grid">
+  <AzGrid theme="dark" columns={columns} dataSource={rows} />
+</div>
+```
+
+```css
+.deco-grid {
+  --azgrid-bg: #0A0A0A;
+  --azgrid-fg: #eee7d6;
+  --azgrid-border: #6b5824;
+  --azgrid-accent: #D4AF37;
+  --azgrid-radius: 0;
+  --azgrid-header-bg: var(--azgrid-bg);
+  --azgrid-header-fg: var(--azgrid-accent);
+  --azgrid-header-text-transform: uppercase;
+  --azgrid-header-letter-spacing: .1em;
+  --azgrid-header-font-weight: 600;
+  --azgrid-cell-border: var(--azgrid-border);
+  --azgrid-cell-border-width: 1px;
+  --azgrid-row-bg-odd: #12110e;
+  --azgrid-row-bg-hover: #282211;
+  --azgrid-row-bg-selected: #423619;
+  --azgrid-row-bg-active: #332a15;
+  --azgrid-scrollbar-track: var(--azgrid-bg);
+  --azgrid-scrollbar-thumb: var(--azgrid-border);
+  --azgrid-loading-bg: rgba(10, 10, 10, .85);
+}
+```
+
+See [src/example.tsx](src/example.tsx) for light, dark and a complete custom `deco` palette.
+
+Custom renderers must style their own content. External menu portal containers need
+`azgrid-scope`, the matching `azgrid-theme-<name>` class and the host variables.

package/config/check-theme.cjs

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const assert = require('assert');
+const postcss = require('postcss');
+const cssTree = require('css-tree');
+const css = fs.readFileSync('src/themes/azgrid-theme.css', 'utf8');
+cssTree.parse(css);
+const theme = postcss.parse(css);
+const presets = new Set();
+const used = new Set();
+let important = [];
+theme.walkDecls(d => {
+ if(d.prop.startsWith('--azgrid-preset-')) presets.add(d.prop.slice('--azgrid-preset-'.length));
+ else {
+  assert(!/#[\da-f]{3,8}\b|rgba?\(|hsla?\(/i.test(d.value), 'literal outside presets: '+d);
+  for(const match of d.value.matchAll(/var\(--azgrid-(?!preset-)([\w-]+)/g)) used.add(match[1]);
+ }
+ if(d.important) { assert(d.prev().type === 'comment', 'comment required for !important'); important.push(d.parent.selector); }
+});
+for(const name of presets) assert(used.has(name), 'unused public token '+name);
+for(const name of used) assert(presets.has(name), 'missing fallback '+name);
+const readme = fs.readFileSync('README.md','utf8');
+for(const name of used) assert(readme.includes('`--azgrid-'+name+'`'), 'undocumented '+name);
+assert.equal(important.length,2);
+// Every literal paint declaration in Inovua must have a scoped override.
+const upstream = postcss.parse(fs.readFileSync('node_modules/@inovua/reactdatagrid-enterprise/index.css','utf8'));
+let count = 0;
+upstream.walkRules(r => {
+ const colour = r.nodes.some(d => /^(color|background.*|.*border.*|outline.*|fill|stroke|.*shadow)$/.test(d.prop) && /#[\da-f]{3,8}\b|rgba?\(|hsla?\(|\b(?:transparent|white|black|grey|gray|red|blue|silver)\b/i.test(d.value));
+ if(!colour || r.parent.type === 'atrule') return;
+ for(const selector of r.selectors) {
+  const scoped = selector.startsWith('.InovuaReactDataGrid--') || /^\.InovuaReactDataGrid(?=[\s.:#>]|$)/.test(selector) ? '.azgrid'+selector : '.azgrid-scope '+selector;
+  assert(theme.nodes.some(n=>n.type==='rule' && n.selectors.includes(scoped)), 'missing selector '+selector);
+ }
+ count++;
+});
+console.log('PASS:',used.size,'documented tokens;',count,'upstream paint rules covered; only two commented !important selectors');
+console.log(important.join('\n'));

package/config/generate-theme.cjs

@@ -0,0 +1,132 @@
+// Regenerate after upgrading Inovua: node config/generate-theme.cjs
+// Keep upstream layout, icon geometry, state specificity and selector order.
+const fs = require('fs');
+const postcss = require('postcss');
+
+// [light fallback, dark fallback, description]. Presets define fallback tokens,
+// never public tokens: variables inherited from a host wrapper must win.
+const tokens = {
+	bg: ['#fff', '#313943', 'Grid background'],
+	fg: ['#555e68', '#c5cae9', 'Grid text'],
+	border: ['#e4e3e2', '#4f575f', 'Grid border and separators'],
+	'font-family': ["'Nunito Sans', 'Iran Sans', sans-serif", "'Nunito Sans', 'Iran Sans', sans-serif", 'Grid and control font family'],
+	radius: ['0', '0', 'Grid, input and menu corner radius'],
+	accent: ['#7986cb', '#caae53', 'Focus indicators, sort arrows, checkboxes and selection handles'],
+	transparent: ['transparent', 'transparent', 'Transparent structural surfaces'],
+	'muted-fg': ['#99a1aa', '#9ca6b0', 'Disabled text and secondary icons'],
+	'shadow-color': ['rgba(0, 0, 0, .2)', 'rgba(0, 0, 0, .4)', 'Menu and input shadow colour'],
+	'header-bg': ['#fff', '#3b444f', 'Header and grouped header background'],
+	'header-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Header text'],
+	'header-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Header separators'],
+	'header-font-size': ['14px', '14px', 'Header font size'],
+	'header-text-transform': ['none', 'none', 'Header text transform'],
+	'header-letter-spacing': ['normal', 'normal', 'Header letter spacing'],
+	'header-font-weight': ['500', '500', 'Header font weight'],
+	'row-bg-even': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Even and non-zebra rows'],
+	'row-bg-odd': ['#fafafa', '#353e48', 'Odd rows'],
+	'row-bg-hover': ['#ebedf7', '#454f5b', 'Hovered rows and cells'],
+	'row-fg-hover': ['var(--azgrid-fg, var(--azgrid-preset-fg))', '#ececec', 'Hovered row text'],
+	'row-bg-selected': ['#dce0f2', '#655c3e', 'Selected rows and cells'],
+	'row-fg-selected': ['var(--azgrid-fg, var(--azgrid-preset-fg))', '#fff', 'Selected row text'],
+	'row-bg-active': ['#ebedf7', '#4f575f', 'Active rows'],
+	'cell-border': ['rgba(1, 1, 1, .1)', '#4f575f', 'Cell borders'],
+	'cell-border-width': ['0.1px', '0.1px', 'Cell border width'],
+	'cell-padding': ['0 8px', '0 8px', 'Ordinary data cell padding; expand/reorder tools keep their layout'],
+	'filter-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Filter row and input background, also editors and search'],
+	'filter-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Filter input and editor text'],
+	'filter-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Filter input borders'],
+	'filter-placeholder': ['var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg))', 'var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg))', 'Input placeholder text'],
+	'filter-focus-ring': ['var(--azgrid-accent, var(--azgrid-preset-accent))', 'var(--azgrid-accent, var(--azgrid-preset-accent))', 'Focused input border and ring'],
+	'pagination-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Pagination toolbar, page number and page size controls'],
+	'pagination-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Pagination text and icons'],
+	'pagination-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Pagination control borders'],
+	'menu-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Column, filter, context, select menus and date pickers'],
+	'menu-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Menu text and icons'],
+	'menu-border': ['var(--azgrid-border, var(--azgrid-preset-border))', 'var(--azgrid-border, var(--azgrid-preset-border))', 'Menu borders and separators'],
+	'menu-bg-hover': ['var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover))', 'var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover))', 'Hovered/focused menu entries'],
+	'scrollbar-track': ['#f1f1f1', '#313943', 'Native and Inovua scrollbar tracks'],
+	'scrollbar-thumb': ['#b5b5b5', '#697582', 'Native and Inovua scrollbar thumbs'],
+	'empty-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Empty state background'],
+	'empty-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'No records text'],
+	'loading-bg': ['rgba(255, 255, 255, .8)', 'rgba(49, 57, 67, .8)', 'Loading overlay background'],
+	'loading-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Loading text and spinner'],
+	'tree-bg': ['var(--azgrid-row-bg-even, var(--azgrid-preset-row-bg-even))', 'var(--azgrid-row-bg-even, var(--azgrid-preset-row-bg-even))', 'Tree/group row background'],
+	'tree-fg': ['var(--azgrid-fg, var(--azgrid-preset-fg))', 'var(--azgrid-fg, var(--azgrid-preset-fg))', 'Tree/group text and expand icons'],
+	'details-bg': ['var(--azgrid-bg, var(--azgrid-preset-bg))', 'var(--azgrid-bg, var(--azgrid-preset-bg))', 'Row details background'],
+	'locked-column-shadow': ['0 0 5px rgba(0, 0, 0, .2)', '0 0 5px rgba(0, 0, 0, .5)', 'Locked column separator shadow (complete CSS box-shadow value)'],
+};
+const variable = name => `var(--azgrid-${name}, var(--azgrid-preset-${name}))`;
+const colour = /#[\da-f]{3,8}\b|(?:rgba?|hsla?)\([^)]*\)|\b(?:transparent|white|black|grey|gray|red|blue|silver)\b/gi;
+function tokenFor(selector, prop, literal) {
+	const bg = /background/.test(prop);
+	const border = /border|outline/.test(prop);
+	if (literal === 'transparent') return 'transparent';
+	if (/shadow/.test(prop)) return 'shadow-color';
+	if (/scroll.*(?:thumb)|(?:thumb).*scroll/.test(selector)) return 'scrollbar-thumb';
+	if (/scroll.*(?:track)|scrollbar/.test(selector)) return 'scrollbar-track';
+	if (/loader-spinner/.test(selector)) return literal === '#7986cb' ? 'accent' : 'muted-fg';
+	if (/loader-loadbar/.test(selector)) return 'loading-fg';
+	if (/load-mask|loading/.test(selector)) return bg ? 'loading-bg' : 'loading-fg';
+	if (/empty/.test(selector)) return bg ? 'empty-bg' : 'empty-fg';
+	if (/placeholder/.test(selector)) return 'filter-placeholder';
+	if (/sort-icon|selection-dragger|active-borders|checkbox/.test(selector)) {
+		if (/unchecked|disabled/.test(selector)) return 'muted-fg';
+		if (prop === 'stroke') return 'bg';
+		return /color/.test(prop) ? 'fg' : 'accent';
+	}
+	if (/cell__selection/.test(selector)) return bg ? 'row-bg-selected' : 'accent';
+	if (/menu|combo-box__list|calendar|date-input__picker/.test(selector) && !/column-header__menu-tool/.test(selector)) {
+		return border ? 'menu-border' : bg ? (/over|hover|focused|selected|active/.test(selector) ? 'menu-bg-hover' : 'menu-bg') : 'menu-fg';
+	}
+	if (/pagination/.test(selector)) return border ? 'pagination-border' : bg ? 'pagination-bg' : 'pagination-fg';
+	if (/focused|:focus/.test(selector) && border) return 'filter-focus-ring';
+	if (/filter|text-input|number-input|numeric-input|date-input|combo-box|editor/.test(selector)) return border ? 'filter-border' : bg ? 'filter-bg' : 'filter-fg';
+	if (/row-details/.test(selector)) return border ? 'border' : bg ? 'details-bg' : 'fg';
+	if (border) return /header/.test(selector) ? 'header-border' : /cell/.test(selector) ? 'cell-border' : 'border';
+	if (/row.*(?:selected)|cell--cell-selected/.test(selector)) return bg ? 'row-bg-selected' : 'row-fg-selected';
+	if (/hover|--over/.test(selector)) return bg ? 'row-bg-hover' : 'row-fg-hover';
+	if (/row--active|cell--cell-active/.test(selector)) return bg ? 'row-bg-active' : 'fg';
+	if (/header/.test(selector)) return bg ? 'header-bg' : 'header-fg';
+	if (/group-row|node-tool|tree/.test(selector)) return bg ? 'tree-bg' : 'tree-fg';
+	if (/row--odd/.test(selector)) return bg ? 'row-bg-odd' : 'fg';
+	if (/row--even|row--no-zebra/.test(selector)) return bg ? 'row-bg-even' : 'fg';
+	return bg ? 'bg' : /fill|stroke/.test(prop) ? 'muted-fg' : 'fg';
+}
+let css = '/* Token overrides for Inovua 5.10.2. Generated by config/generate-theme.cjs.\n * index.css retains layout and icons. Public tokens are inherited; preset tokens\n * are fallback implementation details. Do not set public defaults on the root. */\n';
+for (const [index, selector] of [[0, '.azgrid-scope, .azgrid, .azgrid-theme-light'], [1, '.azgrid-theme-dark']]) {
+	css += `${selector} {\n`;
+	for (const [name, values] of Object.entries(tokens)) css += `\t--azgrid-preset-${name}: ${values[index]};\n`;
+	css += '}\n\n';
+}
+const upstream = postcss.parse(fs.readFileSync('node_modules/@inovua/reactdatagrid-enterprise/index.css', 'utf8'));
+upstream.walkRules(rule => {
+	if (!rule.selector || rule.parent.type === 'atrule') return;
+	const declarations = [];
+	for (const d of rule.nodes) {
+		// The configurable first-row border is supplied in theme-extras.css.
+		if (/__row--first /.test(rule.selector) && d.prop === 'border-top') continue;
+		if (d.type !== 'decl' || !/^(color|background.*|.*border.*|outline.*|fill|stroke|.*shadow|font-family)$/.test(d.prop)) continue;
+		let value = d.value.replace(colour, literal => variable(tokenFor(rule.selector, d.prop, literal.toLowerCase())));
+		if (/^border(?:-(?:top|right|bottom|left))?$|^border.*width$/.test(d.prop)
+			&& /\.InovuaReactDataGrid__cell(?=[\s.:]|$)/.test(rule.selector)
+			&& !/selection/.test(rule.selector)) {
+			value = value.replace(/\b\d*\.?\d+(?:px|em|rem)\b/g, variable('cell-border-width'));
+		}
+		if (d.prop === 'font-family') value = variable('font-family');
+		if (value === d.value) continue;
+		if (d.important) declarations.push('\t/* Inovua declares this border !important; specificity cannot override it. */');
+		declarations.push(`\t${d.prop}: ${value}${d.important ? ' !important' : ''};`);
+	}
+	if (!declarations.length) return;
+	const selectors = rule.selectors.map(selector => selector.startsWith('.InovuaReactDataGrid--') || /^\.InovuaReactDataGrid(?=[\s.:#>]|$)/.test(selector)
+		? '.azgrid' + selector : '.azgrid-scope ' + selector);
+	css += `${selectors.join(',\n')} {\n${declarations.join('\n')}\n}\n\n`;
+});
+css += fs.readFileSync('config/theme-extras.css', 'utf8');
+fs.writeFileSync('src/themes/azgrid-theme.css', css);
+// The same manifest supplies the complete public API table in the README.
+const readme = fs.readFileSync('README.md', 'utf8');
+const table = '| Variable | Controls | Light / dark fallback |\n| --- | --- | --- |\n' + Object.entries(tokens).map(([name, values]) => `| \`--azgrid-${name}\` | ${values[2]} | ${values[0] === values[1] ? `\`${values[0]}\`` : `\`${values[0]}\` / \`${values[1]}\``} |`).join('\n');
+fs.writeFileSync('README.md', readme
+	.replace(/<!-- azgrid-tokens -->[\s\S]*?<!-- \/azgrid-tokens -->/, `<!-- azgrid-tokens -->\n${table}\n<!-- /azgrid-tokens -->`)
+	.replace(/<!-- azgrid-deco -->[\s\S]*?<!-- \/azgrid-deco -->/, '<!-- azgrid-deco -->\n```css\n' + fs.readFileSync('src/themes/example-palettes.css', 'utf8') + '\n```\n<!-- /azgrid-deco -->'));

package/config/theme-extras.css

@@ -0,0 +1,107 @@
+/* Additional surfaces and typography not assigned colours by Inovua. */
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
+	background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
+.azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
+	background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
+	color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
+.azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
+	fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.InovuaReactDataGrid {
+	background: var(--azgrid-bg, var(--azgrid-preset-bg));
+	color: var(--azgrid-fg, var(--azgrid-preset-fg));
+	border-color: var(--azgrid-border, var(--azgrid-preset-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid .InovuaReactDataGrid__column-header__content,
+.azgrid .InovuaReactDataGrid__header-group__title {
+	color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
+	font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
+	font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
+	text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
+	letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
+	border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
+	/* Inovua's first-row border-top is !important. Keep the same border API on this row. */
+	border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
+	padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
+}
+.azgrid .InovuaReactDataGrid__empty-wrapper {
+	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
+	background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
+}
+.azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
+.azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
+	box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
+}
+.azgrid-scope input,
+.azgrid-scope select,
+.azgrid-scope .azgrid-searcharea {
+	color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
+	background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
+	border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid-scope input::placeholder {
+	color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
+}
+.azgrid-scope input:focus-visible,
+.azgrid-scope select:focus-visible {
+	outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
+}
+.azgrid-scope .inovua-react-pagination-toolbar input,
+.azgrid-scope .inovua-react-pagination-toolbar select {
+	background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
+	color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
+	border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
+}
+.azgrid-scope .inovua-react-toolkit-text-input,
+.azgrid-scope .inovua-react-toolkit-combo-box,
+.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));
+	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));
+	scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-track {
+	background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-thumb {
+	background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
+}
+.azgrid .InovuaReactDataGrid__row.deleted:after {
+	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
+}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
-export * from './src';
-import { AzGrid } 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/views/DataGrid';
 export default AzGrid;

package/dist/index.js

@@ -3,18 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  get_row_id: true,
+  set_row_id: true,
+  get_col_name: true,
+  get_col_header: true
+};
 exports.default = void 0;
-var _src = require("./src");
-Object.keys(_src).forEach(function (key) {
+Object.defineProperty(exports, "get_col_header", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_col_header;
+  }
+});
+Object.defineProperty(exports, "get_col_name", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_col_name;
+  }
+});
+Object.defineProperty(exports, "get_row_id", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_row_id;
+  }
+});
+Object.defineProperty(exports, "set_row_id", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.set_row_id;
+  }
+});
+var _DataGrid = require("./src/views/DataGrid");
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+var _types = require("./src/types/types");
+Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _src[key]) return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _src[key];
+      return _types[key];
     }
   });
 });
-var _default = exports.default = _src.AzGrid;
+var _func_grid = require("./src/func/func_grid");
+var _default = exports.default = _DataGrid.AzGrid;

package/dist/src/example.d.ts

@@ -1,4 +1,6 @@
 export * from './views/DataGrid';
 import React from 'react';
+import './themes/azgrid-theme.css';
+import './themes/example-palettes.css';
 export declare function ExampleGrid(): React.JSX.Element;
 export default ExampleGrid;

package/dist/src/example.js

@@ -21,6 +21,8 @@ Object.keys(_DataGrid).forEach(function (key) {
   });
 });
 var _react = _interopRequireDefault(require("react"));
+require("./themes/azgrid-theme.css");
+require("./themes/example-palettes.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const columns = [{
@@ -138,9 +140,24 @@ function ExampleGrid() {
       content: product.name
     }];
   }, []);
-  return _react.default.createElement(_DataGrid.default, {
+  return _react.default.createElement("div", {
+    style: {
+      display: 'grid',
+      gap: 20,
+      height: '100%',
+      overflow: 'auto'
+    }
+  }, ['light', 'dark', 'deco'].map(theme => _react.default.createElement("section", {
+    key: theme,
+    className: theme === 'deco' ? 'azgrid-example-deco' : undefined,
+    style: {
+      height: 360,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, _react.default.createElement("h3", null, theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`), _react.default.createElement(_DataGrid.default, {
+    theme: theme,
     delayedSize: true,
-    dark: true,
     // details_dataSource={details_dataSource}
     dataSource: dataSource,
     details_columns: columns,
@@ -158,6 +175,17 @@ function ExampleGrid() {
     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,
@@ -168,6 +196,6 @@ function ExampleGrid() {
       // rowIndexColumn: true,
       // checkboxColumn: true,
     }
-  });
+  }))));
 }
 var _default = exports.default = ExampleGrid;

package/dist/src/index.js

@@ -59,7 +59,6 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 var _func_grid = require("./func/func_grid");
-var _example = _interopRequireDefault(require("./example"));
 var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -67,8 +66,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /* -------------------------------------------------------------------------- */
 //
 var _default = exports.default = _DataGrid.default;
-const testroot = document.getElementById('testroot');
+const testroot = typeof document === 'undefined' ? null : document.getElementById('testroot');
 if (testroot) {
-  const root = _client.default.createRoot(document.getElementById('testroot'));
-  root.render(_react.default.createElement(_example.default, null));
+  const root = _client.default.createRoot(testroot);
+  // Example styles, including the optional token theme, load only for the demo.
+  Promise.resolve().then(() => _interopRequireWildcard(require('./example'))).then(({
+    default: ExampleGrid
+  }) => root.render(_react.default.createElement(ExampleGrid, null)));
 }