@azrico/reactgrid 1.4.1 → 1.5.1

package/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "ClaudeInChromeDomain(localhost:3123)",
+      "mcp__claude-in-chrome__tabs_context_mcp"
+    ]
+  }
+}

package/README.md

@@ -16,6 +16,33 @@ const rows = [{ __table_id: '1', name: 'Alice' }];
 
 The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
 
+## Accessibility
+
+The grid exposes ARIA grid semantics, so screen readers and automation tools can read it from the accessibility tree.
+
+| Element | Attributes |
+| --- | --- |
+| Grid root | `role="grid"`, `aria-rowcount` (total rows incl. header; the full data count when paginated), `aria-colcount` (visible columns), `aria-label`, `aria-readonly="true"` when the grid isn't editable |
+| Header row | `role="row"`, `aria-rowindex="1"` |
+| Header cells | `role="columnheader"`, `aria-colindex`, `aria-sort` (`ascending` / `descending` / `none`, sortable columns only) |
+| Rows | `role="row"`, `aria-rowindex` (1-based, header is 1, includes the page offset), `aria-selected` when selection is enabled, `data-row-id` |
+| Body cells | `role="gridcell"`, `aria-colindex`, `data-column="<column name>"`, `aria-readonly="true"` when the cell can't be edited |
+| Row-number cells | `role="rowheader"` |
+
+New props:
+
+- `ariaLabel?: string` on the grid sets the accessible name of the grid.
+- `ariaLabel?: (value, data) => string` on a column sets `aria-label` on its cells. Use it for icons, badges or values whose visible text isn't descriptive.
+
+```tsx
+const columns = [{ name: 'status', header: 'Status', ariaLabel: (value) => `Status: ${value}` }];
+
+<AzGrid ariaLabel="Orders" columns={columns} dataSource={rows} />;
+```
+
+Override any cell attribute with the column's `cellDOMProps` / `headerDOMProps`. Values you set there are kept.
+A `gridOptions.onRenderRow` runs after the grid's own row attributes are set, so it can change them too.
+
 ## Themes
 
 Use `theme="light"` (default), `theme="dark"`, or a custom name. Custom names apply
@@ -134,4 +161,4 @@ Use dark defaults with an obsidian background, gold accents, square corners and
 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.
+`azgrid-scope`, the matching `azgrid-theme-<name>` class and the host variables.

package/dist/src/example.js

@@ -39,7 +39,8 @@ const columns = [{
   name: 'age',
   title: 'Age',
   type: 'number',
-  defaultFlex: 1
+  defaultFlex: 1,
+  ariaLabel: value => `${value} years`
 }];
 const editableColumns = ['job', 'age'];
 function getData(delta, max = 200) {
@@ -157,6 +158,7 @@ function ExampleGrid() {
     }
   }, _react.default.createElement("h3", null, theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`), _react.default.createElement(_DataGrid.default, {
     theme: theme,
+    ariaLabel: `Users (${theme})`,
     delayedSize: true,
     // details_dataSource={details_dataSource}
     dataSource: dataSource,
@@ -185,7 +187,11 @@ function ExampleGrid() {
       defaultLimit: 10,
       pageSizes: [10, 25, 50],
       checkboxColumn: true,
-      multiSelect: true
+      multiSelect: true,
+      // consumer onRenderRow runs after the internal one
+      onRenderRow: rowProps => {
+        rowProps['data-example-row'] = 'true';
+      }
       // defaultFilterValue: filterValue,
       // remoteFilter: false,
       // multiSelect: true,

package/dist/src/func/func_a11y.d.ts

@@ -0,0 +1,52 @@
+import { GridType } from '../types/types';
+export type ColumnA11yOptions = {
+    /** role of body cells, e.g. 'gridcell' or 'rowheader' */
+    role?: string;
+    /** grid level editable flag, columns are readonly when the grid isn't editable */
+    gridEditable?: boolean;
+    /** false skips aria-readonly (for interactive special columns like the checkbox column) */
+    markReadonly?: boolean;
+};
+/**
+ * wraps column dom props to add ARIA attributes,
+ * consumer's cellDOMProps/headerDOMProps run first and win over ours
+ * @param col
+ * @param options
+ * @returns a new column object
+ */
+export declare function apply_column_a11y<T extends Record<string, any>>(col: T, options?: ColumnA11yOptions): T;
+/**
+ * adds ARIA attributes to a row, called from onRenderRow
+ * @param rowProps
+ * @param selectionEnabled
+ */
+export declare function apply_row_a11y(rowProps: any, selectionEnabled: boolean): void;
+/**
+ * total number of data rows, uses the datasource count when paginated
+ * so the real size is reported, not just the visible page
+ * @param grid
+ */
+export declare function get_grid_row_count(grid: GridType): number;
+export type RootA11yOptions = {
+    ariaLabel?: string;
+    editable?: boolean;
+};
+/**
+ * root element of the grid, null when it isn't mounted
+ * @param grid computed props of the grid
+ */
+export declare function get_grid_root(grid: GridType | null | undefined): Element | null;
+/**
+ * key of the values apply_root_a11y writes, used to skip applying when nothing changed
+ * @param grid computed props of the grid
+ * @param options
+ */
+export declare function get_root_a11y_key(grid: GridType | null | undefined, options: RootA11yOptions): string;
+/**
+ * sets ARIA attributes on the grid root element
+ * inovua doesn't forward props to its root, so this is applied on the DOM node
+ * @param grid computed props of the grid
+ * @param options
+ * @returns the element the attributes were applied to, null when the grid isn't mounted
+ */
+export declare function apply_root_a11y(grid: GridType | null | undefined, options: RootA11yOptions): Element | null;

package/dist/src/func/func_a11y.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.apply_column_a11y = apply_column_a11y;
+exports.apply_root_a11y = apply_root_a11y;
+exports.apply_row_a11y = apply_row_a11y;
+exports.get_grid_root = get_grid_root;
+exports.get_grid_row_count = get_grid_row_count;
+exports.get_root_a11y_key = get_root_a11y_key;
+function set_default(target, key, value) {
+  if (target[key] === undefined && value !== undefined && value !== null) target[key] = value;
+}
+function resolve_dom_props(src, cellProps) {
+  const res = typeof src === 'function' ? src(cellProps) : src;
+  return res ? {
+    ...res
+  } : {};
+}
+function get_sort_dir(sortInfo) {
+  if (!sortInfo || !sortInfo.dir) return 'none';
+  return sortInfo.dir > 0 ? 'ascending' : 'descending';
+}
+function is_cell_readonly(cellProps, gridEditable) {
+  if (!gridEditable) return true;
+  const editable = cellProps.computedEditable;
+  //function editables are decided per edit, we can't know it here
+  if (typeof editable === 'function') return false;
+  return !editable;
+}
+/**
+ * wraps column dom props to add ARIA attributes,
+ * consumer's cellDOMProps/headerDOMProps run first and win over ours
+ * @param col
+ * @param options
+ * @returns a new column object
+ */
+function apply_column_a11y(col, options = {}) {
+  const {
+    role = 'gridcell',
+    gridEditable = false,
+    markReadonly = true
+  } = options;
+  const consumerCellDOMProps = col.cellDOMProps;
+  const consumerHeaderDOMProps = col.headerDOMProps;
+  const ariaLabel = col.ariaLabel;
+  return {
+    ...col,
+    cellDOMProps: cellProps => {
+      const res = resolve_dom_props(consumerCellDOMProps, cellProps);
+      set_default(res, 'role', role);
+      set_default(res, 'aria-colindex', cellProps.computedVisibleIndex + 1);
+      set_default(res, 'data-column', cellProps.name || cellProps.id);
+      if (markReadonly && is_cell_readonly(cellProps, gridEditable)) set_default(res, 'aria-readonly', 'true');
+      const data = cellProps.data;
+      if (typeof ariaLabel === 'function' && data && !data.__group && !data.__summary) set_default(res, 'aria-label', ariaLabel(cellProps.value, data));
+      return res;
+    },
+    headerDOMProps: cellProps => {
+      const res = resolve_dom_props(consumerHeaderDOMProps, cellProps);
+      set_default(res, 'role', 'columnheader');
+      set_default(res, 'aria-colindex', cellProps.computedVisibleIndex + 1);
+      if (cellProps.computedSortable) set_default(res, 'aria-sort', get_sort_dir(cellProps.computedSortInfo));
+      return res;
+    }
+  };
+}
+/**
+ * adds ARIA attributes to a row, called from onRenderRow
+ * @param rowProps
+ * @param selectionEnabled
+ */
+function apply_row_a11y(rowProps, selectionEnabled) {
+  var _ref, _rowProps$remoteRowIn;
+  //filler rows (showEmptyRows) are not data rows
+  if (rowProps.empty) return;
+  const index = (_ref = (_rowProps$remoteRowIn = rowProps.remoteRowIndex) !== null && _rowProps$remoteRowIn !== void 0 ? _rowProps$remoteRowIn : rowProps.realIndex) !== null && _ref !== void 0 ? _ref : 0;
+  rowProps['role'] = 'row';
+  rowProps['aria-rowindex'] = index + 2; // 1-based, header row is 1
+  if (selectionEnabled) rowProps['aria-selected'] = rowProps.selected ? 'true' : 'false';
+}
+function set_attr(el, key, value) {
+  if (value === undefined || value === null || value === '') {
+    if (el.hasAttribute(key)) el.removeAttribute(key);
+    return;
+  }
+  const str = String(value);
+  if (el.getAttribute(key) !== str) el.setAttribute(key, str);
+}
+/**
+ * total number of data rows, uses the datasource count when paginated
+ * so the real size is reported, not just the visible page
+ * @param grid
+ */
+function get_grid_row_count(grid) {
+  const g = grid;
+  const rendered = Array.isArray(g.data) ? g.data.length : 0;
+  if (!g.computedPagination) return rendered;
+  const offset = g.computedLivePagination ? 0 : g.computedSkip || 0;
+  return Math.max(g.paginationCount || 0, offset + rendered);
+}
+/**
+ * root element of the grid, null when it isn't mounted
+ * @param grid computed props of the grid
+ */
+function get_grid_root(grid) {
+  var _grid$getDOMNode;
+  return (grid === null || grid === void 0 || (_grid$getDOMNode = grid.getDOMNode) === null || _grid$getDOMNode === void 0 ? void 0 : _grid$getDOMNode.call(grid)) || null;
+}
+/**
+ * key of the values apply_root_a11y writes, used to skip applying when nothing changed
+ * @param grid computed props of the grid
+ * @param options
+ */
+function get_root_a11y_key(grid, options) {
+  var _options$ariaLabel;
+  const g = grid;
+  if (!g) return '';
+  return [get_grid_row_count(g), (g.visibleColumns || []).length, (_options$ariaLabel = options.ariaLabel) !== null && _options$ariaLabel !== void 0 ? _options$ariaLabel : '', options.editable ? 1 : 0].join('|');
+}
+/**
+ * sets ARIA attributes on the grid root element
+ * inovua doesn't forward props to its root, so this is applied on the DOM node
+ * @param grid computed props of the grid
+ * @param options
+ * @returns the element the attributes were applied to, null when the grid isn't mounted
+ */
+function apply_root_a11y(grid, options) {
+  const g = grid;
+  const el = get_grid_root(g);
+  if (!el) return null;
+  set_attr(el, 'role', 'grid');
+  set_attr(el, 'aria-rowcount', get_grid_row_count(g) + 1);
+  set_attr(el, 'aria-colcount', (g.visibleColumns || []).length);
+  set_attr(el, 'aria-label', options.ariaLabel);
+  set_attr(el, 'aria-readonly', options.editable ? undefined : 'true');
+  return el;
+}

package/dist/src/hooks/useGridEvents.js

@@ -7,6 +7,7 @@ exports.useGridEvents = useGridEvents;
 var _react = _interopRequireDefault(require("react"));
 var _func_grid = require("../func/func_grid");
 var _func_child = require("../func/func_child");
+var _func_a11y = require("../func/func_a11y");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function useGridMenuRow() {
   const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
@@ -79,9 +80,52 @@ function useGridEvents(grid, props) {
     return false;
   }, []);
   /* -------------------------------------------------------------------------- */
+  /* ------------------------------ Accessibility ----------------------------- */
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
+  const rootSyncFrame = _react.default.useRef(0);
+  // last applied root values, so row renders (e.g. while scrolling) don't re-apply them
+  const lastRoot = _react.default.useRef({
+    el: null,
+    key: ''
+  });
+  const getRootOptions = () => ({
+    ariaLabel: latestProps.current.ariaLabel,
+    editable: !!latestProps.current.editable
+  });
+  // root attributes are set on the DOM node, batched to once per frame
+  const scheduleRootSync = _react.default.useCallback(() => {
+    var _latestProps$current$;
+    if (rootSyncFrame.current || typeof requestAnimationFrame === 'undefined') return;
+    const grid = (_latestProps$current$ = latestProps.current.liveGridRef) === null || _latestProps$current$ === void 0 || (_latestProps$current$ = _latestProps$current$.current) === null || _latestProps$current$ === void 0 ? void 0 : _latestProps$current$.current;
+    const key = (0, _func_a11y.get_root_a11y_key)(grid, getRootOptions());
+    if (key && key === lastRoot.current.key && (0, _func_a11y.get_grid_root)(grid) === lastRoot.current.el) return;
+    rootSyncFrame.current = requestAnimationFrame(() => {
+      var _latestProps$current$2;
+      rootSyncFrame.current = 0;
+      const liveGrid = (_latestProps$current$2 = latestProps.current.liveGridRef) === null || _latestProps$current$2 === void 0 || (_latestProps$current$2 = _latestProps$current$2.current) === null || _latestProps$current$2 === void 0 ? void 0 : _latestProps$current$2.current;
+      const options = getRootOptions();
+      const el = (0, _func_a11y.apply_root_a11y)(liveGrid, options);
+      lastRoot.current = {
+        el,
+        key: el ? (0, _func_a11y.get_root_a11y_key)(liveGrid, options) : ''
+      };
+    });
+  }, []);
+  _react.default.useEffect(() => {
+    scheduleRootSync();
+  }, [scheduleRootSync, props.ariaLabel, props.editable, props.columns, props.dataSource]);
+  _react.default.useEffect(() => () => {
+    if (rootSyncFrame.current) cancelAnimationFrame(rootSyncFrame.current);
+    rootSyncFrame.current = 0;
+  }, []);
   const onRenderRow = _react.default.useCallback(rowProps => {
+    var _latestProps$current$3;
     // save the original handlers to be called later
     rowProps['data-row-id'] = (0, _func_grid.get_row_id)(rowProps.data);
+    const liveGrid = (_latestProps$current$3 = latestProps.current.liveGridRef) === null || _latestProps$current$3 === void 0 || (_latestProps$current$3 = _latestProps$current$3.current) === null || _latestProps$current$3 === void 0 ? void 0 : _latestProps$current$3.current;
+    (0, _func_a11y.apply_row_a11y)(rowProps, !!(liveGrid !== null && liveGrid !== void 0 && liveGrid.computedRowSelectionEnabled));
+    scheduleRootSync();
   }, []);
   return {
     onRowClick,

package/dist/src/types/types.d.ts

@@ -28,19 +28,30 @@ 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: any, onRendered: any) => React.ReactNode | undefined | null;
 };
-export type AzGridOptions = Partial<TypeDataGridProps>;
+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;
+    };
+};
 export type AzGridProps = {
     dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
     details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
     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[];
@@ -81,6 +92,8 @@ export type DataGridProps = ModifyFields<AzGridProps, {
 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;

package/dist/src/views/DataGrid.js

@@ -19,6 +19,7 @@ var _useGridEvents = require("../hooks/useGridEvents");
 var _useColumnData = require("../hooks/useColumnData");
 var _useDatasource = require("../hooks/useDatasource");
 var _useGridSearch = require("../hooks/useGridSearch");
+var _func_a11y = require("../func/func_a11y");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
@@ -43,11 +44,15 @@ const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', '
 function AzGrid(props) {
   const gridRefBackup = _react.default.useRef(null);
   const gridRef = props.gridRef || gridRefBackup;
+  const liveGridRef = _react.default.useRef(null);
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
   const cached_columns = (0, _useColumnData.useColumnData)(props);
   const dataSource = (0, _useDatasource.useDataSource)(props.dataSource, props);
+  const a11y_columns = _react.default.useMemo(() => cached_columns.map(col => (0, _func_a11y.apply_column_a11y)(col, {
+    gridEditable: !!props.editable
+  })), [cached_columns, props.editable]);
   /* -------------------------------------------------------------------------- */
   /*                                 Row changes                                */
   /* -------------------------------------------------------------------------- */
@@ -93,9 +98,10 @@ function AzGrid(props) {
   return _react.default.createElement(DataGridEventsWrapper, {
     ...props,
     gridRef: gridRef,
+    liveGridRef: liveGridRef,
     static_gridOptions: static_gridOptions,
     dynamic_gridOptions: dynamic_gridOptions,
-    columns: cached_columns,
+    columns: a11y_columns,
     dataSource: dataSource,
     highlightedRow: props.highlightedRow
   });
@@ -135,19 +141,42 @@ function DataGridEventsWrapper(props) {
    * Merge click events into grid options
    */
   const static_gridOptions = _react.default.useMemo(() => {
+    const opts = props.static_gridOptions || {};
     const events = {
       onRowClick: onRowClick,
       onRowContextMenu: onRowContextMenu
     };
+    // internal row attributes first, consumer's onRenderRow last so it can override them
+    const consumerOnRenderRow = opts.onRenderRow;
     const renderProps = {
-      onRenderRow: onRenderRow
+      onRenderRow: consumerOnRenderRow ? rowProps => {
+        onRenderRow(rowProps);
+        consumerOnRenderRow(rowProps);
+      } : onRenderRow
     };
+    const gridEditable = !!props.editable;
+    const a11yProps = {
+      headerProps: {
+        role: 'row',
+        'aria-rowindex': 1,
+        ...opts.headerProps
+      },
+      rowIndexColumn: (0, _func_a11y.apply_column_a11y)(typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {}, {
+        role: 'rowheader',
+        gridEditable
+      })
+    };
+    if (opts.checkboxColumn) a11yProps.checkboxColumn = (0, _func_a11y.apply_column_a11y)(typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {}, {
+      gridEditable,
+      markReadonly: false
+    });
     return {
-      ...props.static_gridOptions,
+      ...opts,
       ...events,
-      ...renderProps
+      ...renderProps,
+      ...a11yProps
     };
-  }, [props.static_gridOptions]);
+  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow]);
   /* -------------------------------------------------------------------------- */
   //TODO ContextMenu not from mui...
   return _react.default.createElement("div", {
@@ -257,9 +286,10 @@ function DataGridCore(props) {
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
     ...props.static_gridOptions,
     ...props.dynamic_gridOptions,
-    rowIndexColumn: true,
+    rowIndexColumn: props.static_gridOptions.rowIndexColumn || true,
     handle: ref => {
       if (ref) props.gridRef.current = ref.current;
+      if (props.liveGridRef) props.liveGridRef.current = ref;
     },
     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'}`),

package/package.json

@@ -1,68 +1,68 @@
-{
-	"name": "@azrico/reactgrid",
-	"version": "1.4.1",
-	"main": "dist/index.js",
-	"description": "React Datagrid",
-	"author": "Azrideus <MehrdadTavangar@gmail.com>",
-	"homepage": ".",
-	"scripts": {
-		"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",
-	"devDependencies": {
-		"@babel/cli": "^7.13.14",
-		"@babel/core": "^7.13.15",
-		"@babel/eslint-parser": "^7.12.17",
-		"@babel/node": "^7.13.13",
-		"@babel/plugin-proposal-class-properties": "^7.12.13",
-		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-		"@babel/preset-env": "^7.13.15",
-		"@babel/preset-typescript": "^7.14.5",
-		"@mui/material": "*",
-		"@types/react": "^18.0.25",
-		"@types/react-dom": "^18.0.8",
-		"react-dom": "^18.2.0",
-		"react-scripts": "^5.0.1",
-		"typescript": "^4.8.4"
-	},
-	"dependencies": {
-		"@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",
-		"clsx": "^2.0.0",
-		"lodash.debounce": "^4.0.8",
-		"react": "^18.2.0",
-		"react-use-size": "^3.0.1"
-	},
-	"peerDependencies": {
-		"@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"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"packageManager": "yarn@4.10.2"
+{
+	"name": "@azrico/reactgrid",
+	"version": "1.5.1",
+	"main": "dist/index.js",
+	"description": "React Datagrid",
+	"author": "Azrideus <MehrdadTavangar@gmail.com>",
+	"homepage": ".",
+	"scripts": {
+		"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",
+	"devDependencies": {
+		"@babel/cli": "^7.13.14",
+		"@babel/core": "^7.13.15",
+		"@babel/eslint-parser": "^7.12.17",
+		"@babel/node": "^7.13.13",
+		"@babel/plugin-proposal-class-properties": "^7.12.13",
+		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+		"@babel/preset-env": "^7.13.15",
+		"@babel/preset-typescript": "^7.14.5",
+		"@mui/material": "*",
+		"@types/react": "^18.0.25",
+		"@types/react-dom": "^18.0.8",
+		"react-dom": "^18.2.0",
+		"react-scripts": "^5.0.1",
+		"typescript": "^4.8.4"
+	},
+	"dependencies": {
+		"@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",
+		"clsx": "^2.0.0",
+		"lodash.debounce": "^4.0.8",
+		"react": "^18.2.0",
+		"react-use-size": "^3.0.1"
+	},
+	"peerDependencies": {
+		"@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"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"packageManager": "yarn@4.10.2"
 }