@azrico/reactgrid 1.3.52 → 1.4.0

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,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/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/dist/src/views/index.js

@@ -17,6 +17,5 @@ Object.keys(_DataGrid).forEach(function (key) {
     }
   });
 });
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 var _default = exports.default = _DataGrid.default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.3.52",
+	"version": "1.4.0",
 	"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"
@@ -61,5 +64,5 @@
 			"last 1 safari version"
 		]
 	},
-	"packageManager": "yarn@3.5.0"
-}
+	"packageManager": "yarn@4.10.2"
+}

package/public/manifest.json

@@ -1,9 +1,9 @@
-{
-	"short_name": "AzGrid",
-	"name": "React Grid Wrapper",
-	"icons": [],
-	"start_url": "./index.html",
-	"display": "standalone",
-	"theme_color": "#000000",
-	"background_color": "#ffffff"
-}
+{
+	"short_name": "AzGrid",
+	"name": "React Grid Wrapper",
+	"icons": [],
+	"start_url": "./index.html",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}

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/hooks/useColumnData.ts

@@ -1,34 +1,34 @@
-import React from 'react';
-import {
-	AzGridProps,
-	DataGridWrapperProps,
-	GridType,
-	LooseColumnDefinition,
-} from '../types/types';
-import { applyColumnData, find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-export function useColumnData(
-	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
-) {
-	if (inputOrProps == null) return [];
-	if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
-	return usePropsColumnData(inputOrProps);
-}
-function useThisColumnData(cols: any[]) {
-	return React.useMemo(() => {
-		return applyColumnData(cols);
-	}, [cols]);
-}
-function usePropsColumnData(props: AzGridProps) {
-	return React.useMemo(() => {
-		return applyColumnData(props);
-	}, [
-		props.columns,
-		props.leftColumns,
-		props.rightColumns,
-		props.editableColumns,
-		props.columnExtensions,
-		props.customColumns,
-	]);
-}
+import React from 'react';
+import {
+	AzGridProps,
+	DataGridWrapperProps,
+	GridType,
+	LooseColumnDefinition,
+} from '../types/types';
+import { applyColumnData, find_realData, get_row_id } from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+
+export function useColumnData(
+	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
+) {
+	if (inputOrProps == null) return [];
+	if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
+	return usePropsColumnData(inputOrProps);
+}
+function useThisColumnData(cols: any[]) {
+	return React.useMemo(() => {
+		return applyColumnData(cols);
+	}, [cols]);
+}
+function usePropsColumnData(props: AzGridProps) {
+	return React.useMemo(() => {
+		return applyColumnData(props);
+	}, [
+		props.columns,
+		props.leftColumns,
+		props.rightColumns,
+		props.editableColumns,
+		props.columnExtensions,
+		props.customColumns,
+	]);
+}

package/src/hooks/useDatasource.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
-import {
-	applyColumnData,
-	ApplyDataSource,
-	find_realData,
-	get_row_id,
-} from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-export function useDataSource(ds: any, props: AzGridProps) {
-	const cached_data = React.useRef<any>();
-	const last_cache_info = React.useRef<any>();
-	return React.useCallback(
-		async (dt) => {
-			return await ApplyDataSource(ds, {
-				skip: dt?.skip,
-				limit: dt?.limit,
-				cached_data: cached_data,
-				last_cache_info: last_cache_info,
-			});
-		},
-		[ds]
-	);
-}
+import React from 'react';
+import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
+import {
+	applyColumnData,
+	ApplyDataSource,
+	find_realData,
+	get_row_id,
+} from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+
+export function useDataSource(ds: any, props: AzGridProps) {
+	const cached_data = React.useRef<any>();
+	const last_cache_info = React.useRef<any>();
+	return React.useCallback(
+		async (dt) => {
+			return await ApplyDataSource(ds, {
+				skip: dt?.skip,
+				limit: dt?.limit,
+				cached_data: cached_data,
+				last_cache_info: last_cache_info,
+			});
+		},
+		[ds]
+	);
+}