@azrico/reactgrid 1.3.49 → 1.3.52

package/dist/src/views/DataGrid.js

@@ -12,16 +12,16 @@ require("../themes/base_styles.css");
 require("../themes/grid.css");
 var _func_grid = require("../func/func_grid");
 var _controls = require("@azrico/controls");
-var _react = _interopRequireWildcard(require("react"));
-var _func_child = require("../func/func_child");
-var _object = require("@azrico/object");
+var _react = _interopRequireDefault(require("react"));
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _reactUseSize = require("react-use-size");
-var _lodash = _interopRequireDefault(require("lodash.debounce"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 && Object.prototype.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; }
+var _useGridEvents = require("../hooks/useGridEvents");
+var _useColumnData = require("../hooks/useColumnData");
+var _useDatasource = require("../hooks/useDatasource");
+var _useGridSearch = require("../hooks/useGridSearch");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
 const defaultOptions = {
   //filterTypes: defaultfilterTypes,
@@ -46,22 +46,11 @@ function AzGrid(props) {
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
-  const cached_columns = _react.default.useMemo(() => {
-    return (0, _func_grid.ApplyColumnData)(props);
-  }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
+  const cached_columns = (0, _useColumnData.useColumnData)(props);
+  const dataSource = (0, _useDatasource.useDataSource)(props.dataSource, props);
   /* -------------------------------------------------------------------------- */
   /*                                 Row changes                                */
   /* -------------------------------------------------------------------------- */
-  const cached_data = _react.default.useRef();
-  const last_cache_info = _react.default.useRef();
-  const dataSource = _react.default.useCallback(async dt => {
-    return await (0, _func_grid.ApplyDataSource)(props.dataSource, {
-      skip: dt === null || dt === void 0 ? void 0 : dt.skip,
-      limit: dt === null || dt === void 0 ? void 0 : dt.limit,
-      cached_data: cached_data,
-      last_cache_info: last_cache_info
-    });
-  }, [props.dataSource]);
   const base_gridOptions = _react.default.useMemo(() => {
     const firstcolumn = cached_columns[0];
     const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
@@ -120,71 +109,14 @@ function AzGrid(props) {
  */
 function DataGridEventsWrapper(props) {
   /* -------------------------------------------------------------------------- */
-  const click_data = _react.default.useRef(null);
-  const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
-  const [menuRow, set_menuRow] = _react.default.useState(null);
-  /* -------------------------------------------------------------------------- */
-  /*                              refresh functions                             */
-  /* -------------------------------------------------------------------------- */
-  const refreshColumn = _react.default.useCallback(col => {
-    const dt = props.gridRef.current.ungroupedData;
-    for (let index = 0; index < dt.length; index++) {
-      props.gridRef.current.setItemPropertyAt(index, col, dt[index][col]);
-    }
-  }, [props.gridRef.current]);
-  const refresh = _react.default.useCallback(() => {
-    const dt = props.gridRef.current.ungroupedData;
-    for (let index = 0; index < dt.length; index++) {
-      props.gridRef.current.setItemAt(index, {}, {
-        replace: false
-      });
-    }
-  }, [props.gridRef.current]);
-  _react.default.useEffect(() => {
-    if (!props.gridRef.current) return;
-    props.gridRef.current['refresh'] = refresh;
-    props.gridRef.current['refreshColumn'] = refreshColumn;
-  }, [props.gridRef.current, props.dataSource, refresh, refreshColumn]);
-  /* -------------------------------------------------------------------------- */
-  /*                                   events                                   */
-  /* -------------------------------------------------------------------------- */
-  const onRowClick = _react.default.useCallback((rowProps, event) => {
-    const nowDate = Date.now();
-    const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
-    if (lastclick) {
-      const diffTime = Math.abs(nowDate - lastclick);
-      if (diffTime < 400) {
-        click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
-        return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
-      }
-    }
-    click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
-    return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-  }, [props.onRowClick, props.onRowDoubleClick]);
-  _react.default.useEffect(() => {
-    click_data.current = {};
-  }, [props.dataSource]);
-  /* ------------------------------- ContextMenu ------------------------------ */
-  const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
-    if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
-      update_menuRow(null, null);
-      return true;
-    }
-    event.preventDefault();
-    const realRow = (0, _func_grid.find_realData)(rowProps.dataSourceArray, event.target, rowProps.data);
-    const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
-    update_menuRow(realRow, anEl);
-    return false;
-  }, []);
-  const update_menuRow = _react.default.useCallback((r = null, el = null) => {
-    set_menuRow(r || null);
-    set_menuAnchorEl(el || null);
-  }, []);
-  /* -------------------------------------------------------------------------- */
-  const onRenderRow = (0, _react.useCallback)(rowProps => {
-    // save the original handlers to be called later
-    rowProps['data-row-id'] = (0, _func_grid.get_row_id)(rowProps.data);
-  }, []);
+  const {
+    onRowClick,
+    onRowContextMenu,
+    onRenderRow,
+    update_menuRow,
+    menuAnchorEl,
+    menuRow
+  } = (0, _useGridEvents.useGridEvents)(props.gridRef.current, props);
   /* -------------------------------------------------------------------------- */
   /**
    * Merge click events into grid options
@@ -220,20 +152,8 @@ function DataGridEventsWrapper(props) {
   }));
 }
 function DataGridDetailsWrapper(props) {
-  const cached_details_columns = _react.default.useMemo(() => {
-    return (0, _func_grid.ApplyColumnData)(props.details_columns);
-  }, [props.details_columns]);
-  const cached_data = _react.default.useRef();
-  const last_cache_info = _react.default.useRef();
-  const details_dataSource = _react.default.useCallback(async dt => {
-    const res = await (0, _func_grid.ApplyDataSource)(props.details_dataSource, {
-      skip: dt.skip,
-      limit: dt.limit,
-      cached_data: cached_data,
-      last_cache_info: last_cache_info
-    });
-    return res;
-  }, [props.details_dataSource]);
+  const cached_details_columns = (0, _useColumnData.useColumnData)(props.details_columns);
+  const details_dataSource = (0, _useDatasource.useDataSource)(props.details_dataSource, props);
   const renderDetailsGrid = ({
     data
   }) => {
@@ -297,60 +217,13 @@ function DataGridDelayedSizeWrapper(props) {
   })));
 }
 function DataGridSearchWrapper(props) {
-  const [search, set_search] = _react.default.useState('');
-  const [filteredData, set_filteredData] = _react.default.useState([]);
-  const currentSearch = _react.default.useRef('');
-  const currentDS = _react.default.useRef([]);
-  const try_search = _react.default.useCallback((0, _lodash.default)(() => {
-    if (!Array.isArray(currentDS.current)) {
-      return;
-    }
-    let newData = [];
-    if (currentSearch.current) {
-      const visibleColumns = props.gridRef.current.visibleColumns;
-      const columns_to_search = (0, _object.array_intersection)(props.advancedFilterFields || [], visibleColumns.map(r => r.id));
-      const lowerSearchText = currentSearch.current.toLowerCase().trim();
-      if (!lowerSearchText || columns_to_search.length === 0) newData = currentDS.current;else {
-        newData = currentDS.current.filter(p => {
-          for (let index = 0; index < columns_to_search.length; index++) {
-            const col = columns_to_search[index];
-            const v = (p[col] + '').toLowerCase(); //value of column
-            if (v && v.indexOf(lowerSearchText) != -1) {
-              //if one column is matching then the row is a match
-              return true;
-            }
-          }
-          return false;
-        });
-      }
-    } else newData = currentDS.current;
-    set_filteredData(newData);
-  }, 1000), []);
-  _react.default.useEffect(() => {
-    (0, _object.fn_eval)(props.dataSource).then(r => {
-      currentDS.current = typeof r === 'object' ? r.data || r : r;
-      searchIfNeeded();
-    });
-  }, [props.dataSource]);
-  _react.default.useEffect(() => {
-    currentSearch.current = search;
-    searchIfNeeded();
-  }, [search]);
-  function searchIfNeeded() {
-    if (!search) {
-      set_filteredData(props.dataSource);
-    } else try_search();
-  }
+  const {
+    element,
+    filteredData
+  } = (0, _useGridSearch.useGridSearch)(props.gridRef.current, props);
   return _react.default.createElement("div", {
     className: 'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'
-  }, _react.default.createElement("form", {
-    className: 'azgrid-searcharea'
-  }, _react.default.createElement("label", null, "Search", _react.default.createElement("input", {
-    type: "text",
-    name: "name",
-    value: search,
-    onChange: e => set_search(e.target.value)
-  }))), _react.default.createElement(DataGridCore, {
+  }, element, _react.default.createElement(DataGridCore, {
     ...props,
     dataSource: filteredData
   }));

package/dist/src/views/index.js

@@ -18,5 +18,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 && Object.prototype.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, 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; }
 var _default = exports.default = _DataGrid.default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.3.49",
+	"version": "1.3.52",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/example.tsx

@@ -1,10 +1,7 @@
 export * from './views/DataGrid';
 
 import AzGrid from './views/DataGrid';
-import { LooseColumnDefinition } from './views/DataGrid';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { getFormControlUtilityClasses } from '@mui/material';
 
 const columns = [
 	{
@@ -30,7 +27,7 @@ const columns = [
 const editableColumns = ['job', 'age'];
 
 function getData(delta: any, max = 200) {
-	const fd: any[] = []; 
+	const fd: any[] = [];
 	for (let index = 0; index < max; index++) {
 		const currentObject = {
 			__table_id: String(index),
@@ -102,9 +99,10 @@ export function ExampleGrid() {
 
 	const onRowDoubleClick = React.useCallback((index: number, rowdata: any) => {
 		console.log('dbl', rowdata?.data || rowdata);
+		alert('dbl: ' + index);
 	}, []);
 	const onRowClick = React.useCallback((index: number, rowdata: any) => {
-		//console.log(rowdata?.data || rowdata);
+		console.log('click:', rowdata?.data || rowdata);
 	}, []);
 
 	React.useEffect(() => {

package/src/func/func_child.ts

@@ -1,23 +1,23 @@
 type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
 type converted_row = { parent: any; self: any; data: mrow };
 
-function get_parentId(obj) {
-	return obj.__parent__table_id ?? obj.parent ?? obj.parentid;
+function getParentId(obj) {
+	return obj.__parent__table_id ?? obj.parentid ?? obj.parent;
 }
-function get_selfId(obj) {
+function getSelfId(obj) {
 	return obj.__table_id ?? obj._id;
 }
 //given an array of rows, fixes parent,child relations
 export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {
 	if (!Array.isArray(rows)) rows = [];
-	const anyparentid = rows.find((r) => get_parentId(r));
-	const anyselfid = rows.find((r) => get_selfId(r));
+	const anyparentid = rows.find((r) => getParentId(r));
+	const anyselfid = rows.find((r) => getSelfId(r));
 	if (!anyparentid || !anyselfid) return rows;
 
 	const converted_rows: converted_row[] = rows
 		.filter((r) => r != null)
 		.map((r) => {
-			return { parent: get_parentId(r), self: get_selfId(r), data: r };
+			return { parent: getParentId(r), self: getSelfId(r), data: r };
 		});
 
 	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);

package/src/func/func_grid.ts

@@ -1,4 +1,4 @@
-import { ColumnDefinition, LooseColumnDefinition } from '../views/DataGrid';
+import { ColumnDefinition, LooseColumnDefinition } from '../types/types';
 
 import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
 // import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
@@ -68,7 +68,7 @@ export async function ApplyDataSource(datasource, props) {
  * @param column_data
  * @returns
  */
-export function ApplyColumnData(column_data: any): ColumnDefinition[] {
+export function applyColumnData(column_data: any): ColumnDefinition[] {
 	const final_columns: MakeWriteable<LooseColumnDefinition>[] = [];
 	if (!column_data) column_data = {};
 	if (Array.isArray(column_data)) column_data = { columns: column_data };

package/src/hooks/useColumnData.ts

@@ -0,0 +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,
+	]);
+}

package/src/hooks/useDatasource.ts

@@ -0,0 +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]
+	);
+}

package/src/hooks/useGridEvents.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import { DataGridWrapperProps, GridType } from '../types/types';
+import { find_realData, get_row_id } from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+
+function useGridMenuRow() {
+	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
+	const [menuRow, set_menuRow] = React.useState<any>(null);
+	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
+		set_menuRow(r || null);
+		set_menuAnchorEl(el || null);
+	}, []);
+	return { update_menuRow, menuAnchorEl, menuRow };
+}
+export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
+	const click_data = React.useRef<any>(null);
+	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
+
+	const refreshColumn = React.useCallback(
+		(col: string) => {
+			const dt = grid.ungroupedData;
+			for (let index = 0; index < dt.length; index++) {
+				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
+			}
+		},
+		[grid]
+	);
+	const refresh = React.useCallback(() => {
+		const dt = grid.ungroupedData;
+		for (let index = 0; index < dt.length; index++) {
+			(grid as any).setItemAt(index, {}, { replace: false });
+		}
+	}, [grid]);
+
+	React.useEffect(() => {
+		if (!grid) return;
+		grid['refresh'] = refresh;
+		grid['refreshColumn'] = refreshColumn;
+	}, [grid, props.dataSource, refresh, refreshColumn]);
+	/* -------------------------------------------------------------------------- */
+	/*                                   events                                   */
+	/* -------------------------------------------------------------------------- */
+	const onRowClick = React.useCallback(
+		(rowProps, event) => {
+			const nowDate = Date.now();
+			const lastclick: number = click_data.current[get_row_id(rowProps)];
+			if (lastclick) {
+				const diffTime = Math.abs(nowDate - lastclick);
+				if (diffTime < 400) {
+					click_data.current[get_row_id(rowProps)] = null;
+					return (
+						props.onRowDoubleClick &&
+						props.onRowDoubleClick(rowProps.rowIndex, rowProps.data)
+					);
+				}
+			}
+
+			click_data.current[get_row_id(rowProps)] = nowDate;
+			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+		},
+		[props.onRowClick, props.onRowDoubleClick]
+	);
+
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [props.dataSource]);
+
+	/* ------------------------------- ContextMenu ------------------------------ */
+	const onRowContextMenu = React.useCallback((rowProps, event) => {
+		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
+			update_menuRow(null, null);
+			return true;
+		}
+		event.preventDefault();
+
+		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
+		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
+		update_menuRow(realRow, anEl);
+		return false;
+	}, []);
+
+	/* -------------------------------------------------------------------------- */
+	const onRenderRow = React.useCallback((rowProps) => {
+		// save the original handlers to be called later
+		rowProps['data-row-id'] = get_row_id(rowProps.data);
+	}, []);
+
+	return {
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		update_menuRow,
+		menuAnchorEl,
+		menuRow,
+	};
+}

package/src/hooks/useGridSearch.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
+import debounce from 'lodash.debounce';
+import { array_intersection, fn_eval } from '@azrico/object';
+
+export function useGridSearch(grid: GridType, props: DataGridWrapperProps) {
+	const [search, set_search] = React.useState('');
+	const [filteredData, set_filteredData] = React.useState<any>([]);
+	const currentSearch = React.useRef('');
+	const currentDS = React.useRef<any[]>([]);
+
+	const try_search = React.useCallback(
+		debounce(() => {
+			if (!Array.isArray(currentDS.current)) {
+				return;
+			}
+			let newData: any[] = [];
+			if (currentSearch.current) {
+				const visibleColumns = grid.visibleColumns;
+				const columns_to_search: string[] = array_intersection(
+					props.advancedFilterFields || [],
+					visibleColumns.map((r) => r.id)
+				);
+				const lowerSearchText = currentSearch.current.toLowerCase().trim();
+				if (!lowerSearchText || columns_to_search.length === 0)
+					newData = currentDS.current;
+				else {
+					newData = currentDS.current.filter((p) => {
+						for (let index = 0; index < columns_to_search.length; index++) {
+							const col = columns_to_search[index];
+							const v = (p[col] + '').toLowerCase(); //value of column
+							if (v && v.indexOf(lowerSearchText) != -1) {
+								//if one column is matching then the row is a match
+								return true;
+							}
+						}
+						return false;
+					});
+				}
+			} else newData = currentDS.current;
+			set_filteredData(newData);
+		}, 1000),
+		[grid]
+	);
+	React.useEffect(() => {
+		fn_eval(props.dataSource).then((r) => {
+			currentDS.current = typeof r === 'object' ? r.data || r : r;
+			searchIfNeeded();
+		});
+	}, [props.dataSource]);
+
+	React.useEffect(() => {
+		currentSearch.current = search;
+		searchIfNeeded();
+	}, [search]);
+
+	function searchIfNeeded() {
+		if (!search) {
+			set_filteredData(props.dataSource);
+		} else try_search();
+	}
+
+	const element = (
+		<>
+			<form className={'azgrid-searcharea'}>
+				<label>
+					Search
+					<input
+						type="text"
+						name="name"
+						value={search}
+						onChange={(e) => set_search(e.target.value)}
+					/>
+				</label>
+			</form>
+		</>
+	);
+	return { filteredData, element };
+}

package/src/index.tsx

@@ -1,4 +1,6 @@
 export * from './views/DataGrid';
+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';

package/src/themes/base_styles.css

@@ -38,15 +38,17 @@
 }
 
 .azgrid-searcharea {
+	font-family: 'Nunito Sans', 'Iran Sans', sans-serif;
 	margin: 5px;
 	font-size: large;
 }
 .azgrid-searcharea label {
-	gap: 5px;
+	gap: 10px;
 	display: flex;
 	align-items: center;
 }
-.azgrid-searcharea label input {
+.azgrid-searcharea input {
 	padding: 5px;
+	padding-left: 7px;
 	font-size: large;
 }

package/src/themes/grid.css

@@ -2,19 +2,19 @@
 	z-index: 1000;
 	font-family: 'Nunito Sans', 'Iran Sans', sans-serif;
 }
-.InovuaReactDataGrid--theme-amber-dark {
+
+.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, #313943));
+	--grid-bg-hover: oklch(var(--b2, 40.8% 0.011 128.75));
 	--grid-fg-hover: #ececec;
 }
-.InovuaReactDataGrid {
-	--grid-bg: oklch(var(--b1, #fff));
-	--grid-fg: oklch(var(--bc, #1e1e1e));
-	--grid-bg-hover: oklch(var(--b2, #ebedf7));
-	--grid-bg-hover2: oklch(var(--b3, #ebedf7));
-	--grid-fg-hover: oklch(var(--bc, #1e1e1e));
-}
 .InovuaReactDataGrid__row {
 	color: var(--grid-fg);
 	border-top-width: 1px;