@azrico/reactgrid 1.4.1 → 1.5.2

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, `aria-busy="true"` while loading |
+| 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,57 @@
+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;
+};
+/**
+ * true while the grid is loading (loading prop or async datasource)
+ * @param grid computed props of the grid
+ */
+export declare function is_grid_busy(grid: GridType | null | undefined): 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,148 @@
+"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;
+exports.is_grid_busy = is_grid_busy;
+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);
+}
+/**
+ * true while the grid is loading (loading prop or async datasource)
+ * @param grid computed props of the grid
+ */
+function is_grid_busy(grid) {
+  return !!(grid !== null && grid !== void 0 && grid.computedLoading);
+}
+/**
+ * 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, is_grid_busy(g) ? 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');
+  set_attr(el, 'aria-busy', is_grid_busy(g) ? 'true' : undefined);
+  return el;
+}

package/dist/src/func/func_child.js

@@ -27,23 +27,31 @@ function fix_parent_child_relations(rows) {
     };
   });
   const top_level_rows = converted_rows.filter(r => !r.parent);
-  const any_child = converted_rows.find(r => Boolean(r.parent));
-  if (any_child) {
+  //group rows by parent id once, instead of scanning all rows for every parent
+  const children_by_parent = new Map();
+  for (let index = 0; index < converted_rows.length; index++) {
+    const r = converted_rows[index];
+    if (!r.parent) continue;
+    const key = String(r.parent);
+    const siblings = children_by_parent.get(key);
+    if (siblings) siblings.push(r);else children_by_parent.set(key, [r]);
+  }
+  if (children_by_parent.size > 0) {
     //find children of top-level parents:
     for (let index = 0; index < top_level_rows.length; index++) {
       const mrow = top_level_rows[index];
-      assign_children(mrow, converted_rows);
+      assign_children(mrow, children_by_parent);
     }
   }
   return top_level_rows.map(r => r.data);
 }
-function assign_children(row, all_rows) {
-  const my_children = all_rows.filter(s => row.self == s.parent);
-  if (my_children.length > 0) {
+function assign_children(row, children_by_parent) {
+  const my_children = row.self == null ? undefined : children_by_parent.get(String(row.self));
+  if (my_children && my_children.length > 0) {
     //find children of my children:
     for (let index = 0; index < my_children.length; index++) {
       const child = my_children[index];
-      assign_children(child, all_rows);
+      assign_children(child, children_by_parent);
     }
     row.data.__children = my_children.map(r => r.data);
   } else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0) row.data.__children = undefined;

package/dist/src/hooks/useColumnData.d.ts

@@ -1,2 +1,2 @@
 import { AzGridProps, LooseColumnDefinition } from '../types/types';
-export declare function useColumnData(inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps): import("@inovua/reactdatagrid-community/types").TypeColumn[];
+export declare function useColumnData(inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps): any[];

package/dist/src/hooks/useColumnData.js

@@ -7,18 +7,14 @@ exports.useColumnData = useColumnData;
 var _react = _interopRequireDefault(require("react"));
 var _func_grid = require("../func/func_grid");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const EMPTY_COLUMNS = [];
 function useColumnData(inputOrProps) {
-  if (inputOrProps == null) return [];
-  if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
-  return usePropsColumnData(inputOrProps);
-}
-function useThisColumnData(cols) {
+  // one useMemo for every input kind, so switching between them keeps the hook order
+  const isProps = inputOrProps != null && !Array.isArray(inputOrProps);
+  const props = isProps ? inputOrProps : {};
+  const deps = isProps ? [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns] : [inputOrProps, null, null, null, null, null];
   return _react.default.useMemo(() => {
-    return (0, _func_grid.applyColumnData)(cols);
-  }, [cols]);
-}
-function usePropsColumnData(props) {
-  return _react.default.useMemo(() => {
-    return (0, _func_grid.applyColumnData)(props);
-  }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
+    if (inputOrProps == null) return EMPTY_COLUMNS;
+    return (0, _func_grid.applyColumnData)(inputOrProps);
+  }, [isProps, ...deps]);
 }

package/dist/src/hooks/useGridEvents.d.ts

@@ -1,6 +1,9 @@
 import { DataGridWrapperProps, GridType } from '../types/types';
 export declare function useGridEvents(grid: GridType, props: DataGridWrapperProps): {
     onRowClick: (rowProps: any, event: any) => void | undefined;
+    onRenderLoadMask: (maskProps: {
+        visible?: boolean;
+    }) => void;
     onRowContextMenu: (rowProps: any, event: any) => boolean;
     onRenderRow: (rowProps: any) => void;
     update_menuRow: (r?: any, el?: any) => void;

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);
@@ -23,6 +24,9 @@ function useGridMenuRow() {
 }
 function useGridEvents(grid, props) {
   const click_data = _react.default.useRef(null);
+  // latest props, so the callbacks below stay stable and don't re-render the grid
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
   const {
     update_menuRow,
     menuAnchorEl,
@@ -51,18 +55,22 @@ function useGridEvents(grid, props) {
   /*                                   events                                   */
   /* -------------------------------------------------------------------------- */
   const onRowClick = _react.default.useCallback((rowProps, event) => {
+    const {
+      onRowClick,
+      onRowDoubleClick
+    } = latestProps.current;
     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);
+        return onRowDoubleClick && 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]);
+    return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
+  }, []);
   _react.default.useEffect(() => {
     click_data.current = {};
   }, [props.dataSource]);
@@ -79,12 +87,60 @@ function useGridEvents(grid, props) {
     return false;
   }, []);
   /* -------------------------------------------------------------------------- */
+  /* ------------------------------ Accessibility ----------------------------- */
+  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: '',
+    busy: false
+  });
+  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((force = false) => {
+    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 (!force && 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) : '',
+        busy: el ? (0, _func_a11y.is_grid_busy)(liveGrid) : false
+      };
+    });
+  }, []);
+  _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();
+  }, []);
+  // called by the grid on every render with the load mask state, keeps aria-busy in sync
+  const onRenderLoadMask = _react.default.useCallback(maskProps => {
+    if (!!(maskProps !== null && maskProps !== void 0 && maskProps.visible) !== lastRoot.current.busy) scheduleRootSync(true);
   }, []);
   return {
     onRowClick,
+    onRenderLoadMask,
     onRowContextMenu,
     onRenderRow,
     update_menuRow,

package/dist/src/hooks/useGridSearch.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DataGridWrapperProps, GridType } from '../types/types';
-export declare function useGridSearch(grid: GridType, props: DataGridWrapperProps): {
-    filteredData: any;
+import { DataGridWrapperProps } from '../types/types';
+export declare function useGridSearch(props: DataGridWrapperProps): {
+    filteredData: any[] | ((args: any) => Promise<any>);
     element: React.JSX.Element;
 };

package/dist/src/hooks/useGridSearch.js

@@ -8,51 +8,77 @@ var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 var _object = require("@azrico/object");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function useGridSearch(grid, props) {
+const SEARCH_DELAY = 300;
+function to_rows(result) {
+  return result && typeof result === 'object' ? result.data || result : result;
+}
+//false when the result is only a page of the data (remote pagination)
+function is_complete(result) {
+  if (!result || typeof result !== 'object' || Array.isArray(result)) return true;
+  const loaded = Array.isArray(result.data) ? result.data.length : 0;
+  return !(result.count > loaded);
+}
+function useGridSearch(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 = grid.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;
-        });
+  // null shows the datasource itself, an array shows search results
+  const [searchResult, set_searchResult] = _react.default.useState(null);
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
+  // last result the grid loaded, reused by search instead of loading the data again
+  const loaded = _react.default.useRef(null);
+  const searchId = _react.default.useRef(0);
+  const trackedDataSource = _react.default.useCallback(async args => {
+    const result = await (0, _object.fn_eval)(props.dataSource, args);
+    loaded.current = {
+      ds: props.dataSource,
+      result
+    };
+    return result;
+  }, [props.dataSource]);
+  const get_search_rows = _react.default.useCallback(async () => {
+    const ds = latestProps.current.dataSource;
+    const last = loaded.current;
+    if (last && last.ds === ds && is_complete(last.result)) return to_rows(last.result);
+    return to_rows(await (0, _object.fn_eval)(ds));
+  }, []);
+  const filter_rows = _react.default.useCallback((rows, text) => {
+    var _gridRef$current;
+    const {
+      gridRef,
+      advancedFilterFields
+    } = latestProps.current;
+    const visibleColumns = (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.visibleColumns;
+    const columns_to_search = visibleColumns ? (0, _object.array_intersection)(advancedFilterFields || [], visibleColumns.map(r => r.id)) : advancedFilterFields || [];
+    const lowerSearchText = text.toLowerCase().trim();
+    if (!lowerSearchText || columns_to_search.length === 0) return rows;
+    return rows.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;
+        }
       }
-    } else newData = currentDS.current;
-    set_filteredData(newData);
-  }, 1000), [grid]);
-  _react.default.useEffect(() => {
-    (0, _object.fn_eval)(props.dataSource).then(r => {
-      currentDS.current = typeof r === 'object' ? r.data || r : r;
-      searchIfNeeded();
+      return false;
     });
-  }, [props.dataSource]);
+  }, []);
+  const run_search = _react.default.useMemo(() => (0, _lodash.default)(async text => {
+    const id = ++searchId.current;
+    const rows = await get_search_rows();
+    if (id !== searchId.current || !Array.isArray(rows)) return; //a newer search started
+    set_searchResult(filter_rows(rows, text));
+  }, SEARCH_DELAY), []);
+  _react.default.useEffect(() => () => run_search.cancel(), [run_search]);
   _react.default.useEffect(() => {
-    currentSearch.current = search;
-    searchIfNeeded();
-  }, [search]);
-  function searchIfNeeded() {
-    if (!search) {
-      set_filteredData(props.dataSource);
-    } else try_search();
-  }
+    if (search) {
+      run_search(search);
+      return;
+    }
+    run_search.cancel();
+    searchId.current++;
+    set_searchResult(null);
+  }, [search, props.dataSource]);
   const element = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("form", {
     className: 'azgrid-searcharea'
   }, _react.default.createElement("label", null, "Search", _react.default.createElement("input", {
@@ -62,7 +88,7 @@ function useGridSearch(grid, props) {
     onChange: e => set_search(e.target.value)
   }))));
   return {
-    filteredData,
+    filteredData: searchResult !== null && searchResult !== void 0 ? searchResult : trackedDataSource,
     element
   };
 }

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;