@azrico/reactgrid 1.6.11 → 1.6.13

package/src/themes/azgrid-theme.css

@@ -1934,123 +1934,124 @@
 	fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
-/* Keep the menu row in its hover state while the pointer is in the portaled menu.
- * Match the strongest selected-row :hover selectors, including their cells. */
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
-	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
-	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
-}
-
-/* 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));
-}
-/* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
- * Two classes exceed @azrico/controls' single-class menu rules. */
-.azgrid-context-menu.azrico-controls-contextmenu {
-	--azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
-	--azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
-	--azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
-	--azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
-	--azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	--azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
-	--azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-	border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
-}
-.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));
-}
-/* The grid draws its own scrollbars and pushes the native one out of view by a
-   fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
-   scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
-.azgrid-scope .inovua-react-scroll-container__wrapper > div {
-	scrollbar-width: none;
-}
-.azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
-	display: none;
-}
-.azgrid .InovuaReactDataGrid__row.deleted:after {
-	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
-}
+/* Keep the menu row in its hover state while the pointer is in the portaled menu.
+ * Match the strongest selected-row :hover selectors, including their cells. */
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
+}
+
+/* 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));
+}
+/* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
+ * Two classes exceed @azrico/controls' single-class menu rules. */
+.azgrid-context-menu.azrico-controls-contextmenu {
+	--azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+	--azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
+	--azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
+	--azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
+	--azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	--azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
+	--azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+	border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
+}
+.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));
+}
+/* The grid draws its own scrollbars and pushes the native one out of view by a
+   fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
+   scrollbar, which then overlaps the last pixels of the viewport. Hide it only
+   in the row viewport; toolbars need the native scrollbar for correct sizing. */
+.azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div {
+	scrollbar-width: none;
+}
+.azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
+	display: none;
+}
+.azgrid .InovuaReactDataGrid__row.deleted:after {
+	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
+}

package/src/types/types.ts

@@ -1,163 +1,170 @@
-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?: LooseColumnDefinition[];
-
-	editableColumns?: string[];
-	leftColumns?: string[];
-	rightColumns?: string[];
-	customColumns?: CustomColumnDefinition[];
-
-	contextMenuItems?: ConvertableToMenuItem;
-	/** Keep the context menu open when clicking outside (default false). */
-	dontAutoCloseContextMenu?: boolean;
-	/** Close the context menu on Escape (default false). */
-	escapeClosesContextMenu?: boolean;
-	/** Hide the grid context menu and leave the browser's context menu available. */
-	hideContextMenu?: boolean;
-	/** 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;
-	}
->;
+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;
+	/**
+	 * Stable id of this grid. When set, the column widths the user resizes are saved in localStorage
+	 * (see `setGridStorageScope`) and restored on the next load. Leave it out to keep the columns' own widths.
+	 * Saved widths are matched to columns by name, so grids showing different column sets can share an id.
+	 * Columns with `width` become resizable (`width` is used as `defaultWidth`).
+	 */
+	gridId?: 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?: LooseColumnDefinition[];
+
+	editableColumns?: string[];
+	leftColumns?: string[];
+	rightColumns?: string[];
+	customColumns?: CustomColumnDefinition[];
+
+	contextMenuItems?: ConvertableToMenuItem;
+	/** Keep the context menu open when clicking outside (default false). */
+	dontAutoCloseContextMenu?: boolean;
+	/** Close the context menu on Escape (default false). */
+	escapeClosesContextMenu?: boolean;
+	/** Hide the grid context menu and leave the browser's context menu available. */
+	hideContextMenu?: boolean;
+	/** 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;
+	}
+>;