@azrico/reactgrid 1.5.1 → 1.5.2

package/README.md

@@ -22,7 +22,7 @@ The grid exposes ARIA grid semantics, so screen readers and automation tools can
 
 | 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 |
+| 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` |

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

@@ -31,6 +31,11 @@ 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

package/dist/src/func/func_a11y.js

@@ -9,6 +9,7 @@ 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;
 }
@@ -100,6 +101,13 @@ function get_grid_row_count(grid) {
   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
@@ -117,7 +125,7 @@ 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('|');
+  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
@@ -135,5 +143,6 @@ function apply_root_a11y(grid, options) {
   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

@@ -24,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,
@@ -52,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]);
@@ -81,25 +88,24 @@ function useGridEvents(grid, props) {
   }, []);
   /* -------------------------------------------------------------------------- */
   /* ------------------------------ 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: ''
+    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(() => {
+  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 (key && key === lastRoot.current.key && (0, _func_a11y.get_grid_root)(grid) === lastRoot.current.el) return;
+    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;
@@ -108,7 +114,8 @@ function useGridEvents(grid, props) {
       const el = (0, _func_a11y.apply_root_a11y)(liveGrid, options);
       lastRoot.current = {
         el,
-        key: el ? (0, _func_a11y.get_root_a11y_key)(liveGrid, options) : ''
+        key: el ? (0, _func_a11y.get_root_a11y_key)(liveGrid, options) : '',
+        busy: el ? (0, _func_a11y.is_grid_busy)(liveGrid) : false
       };
     });
   }, []);
@@ -127,8 +134,13 @@ function useGridEvents(grid, props) {
     (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/views/DataGrid.js

@@ -40,11 +40,17 @@ const forcedOptions = {
   theme: 'default-light'
 };
 const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
+// consumer callbacks forwarded to the grid; wrapped so a new function doesn't re-render the grid
+const callback_option_names = ['onSkipChange', 'onLimitChange', 'onEditComplete', 'onSelectionChange', 'onCellSelectionChange'];
+// props DataGridCore renders from, other props don't need to re-render the grid
+const core_prop_names = ['className', 'static_gridOptions', 'dynamic_gridOptions', 'columns', 'dataSource', 'gridRef', 'liveGridRef', 'allowChildRows', 'theme', 'dark', 'children'];
 /* -------------------------------------------------------------------------- */
 function AzGrid(props) {
   const gridRefBackup = _react.default.useRef(null);
   const gridRef = props.gridRef || gridRefBackup;
   const liveGridRef = _react.default.useRef(null);
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
@@ -59,14 +65,15 @@ function AzGrid(props) {
   const base_gridOptions = _react.default.useMemo(() => {
     const firstcolumn = cached_columns[0];
     const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
-    const events = {
-      onSkipChange: props.onSkipChange,
-      onLimitChange: props.onLimitChange,
-      onEditComplete: props.onEditComplete
-    };
+    // call the latest consumer callback, only passed when the consumer gave one
+    const events = {};
+    callback_option_names.forEach(name => {
+      if (props[name]) events[name] = (...args) => {
+        var _latestProps$current$, _latestProps$current;
+        return (_latestProps$current$ = (_latestProps$current = latestProps.current)[name]) === null || _latestProps$current$ === void 0 ? void 0 : _latestProps$current$.call(_latestProps$current, ...args);
+      };
+    });
     const extra_ops = {
-      onSelectionChange: props.onSelectionChange,
-      onCellSelectionChange: props.onCellSelectionChange,
       licenseKey: licenseKey,
       editable: props.editable,
       treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
@@ -77,7 +84,7 @@ function AzGrid(props) {
       ...events,
       ...extra_ops
     };
-  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
+  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.licenseKey, ...callback_option_names.map(name => !!props[name])]);
   const static_gridOptions = _react.default.useMemo(() => {
     const finalres = {
       ...base_gridOptions,
@@ -132,6 +139,7 @@ function DataGridEventsWrapper(props) {
     onRowClick,
     onRowContextMenu,
     onRenderRow,
+    onRenderLoadMask,
     update_menuRow,
     menuAnchorEl,
     menuRow
@@ -152,7 +160,12 @@ function DataGridEventsWrapper(props) {
       onRenderRow: consumerOnRenderRow ? rowProps => {
         onRenderRow(rowProps);
         consumerOnRenderRow(rowProps);
-      } : onRenderRow
+      } : onRenderRow,
+      // track loading for aria-busy, the consumer's renderLoadMask (if any) still renders the mask
+      renderLoadMask: maskProps => {
+        onRenderLoadMask(maskProps);
+        return opts.renderLoadMask ? opts.renderLoadMask(maskProps) : undefined;
+      }
     };
     const gridEditable = !!props.editable;
     const a11yProps = {
@@ -176,7 +189,7 @@ function DataGridEventsWrapper(props) {
       ...renderProps,
       ...a11yProps
     };
-  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow]);
+  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask]);
   /* -------------------------------------------------------------------------- */
   //TODO ContextMenu not from mui...
   return _react.default.createElement("div", {
@@ -271,7 +284,7 @@ function DataGridSearchWrapper(props) {
   const {
     element,
     filteredData
-  } = (0, _useGridSearch.useGridSearch)(props.gridRef.current, props);
+  } = (0, _useGridSearch.useGridSearch)(props);
   return _react.default.createElement("div", {
     className: 'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'
   }, element, _react.default.createElement(DataGridCore, {
@@ -279,18 +292,24 @@ function DataGridSearchWrapper(props) {
     dataSource: filteredData
   }));
 }
-function DataGridCore(props) {
+const DataGridCore = _react.default.memo(DataGridCoreView, (prev, next) => core_prop_names.every(name => prev[name] === next[name]));
+function DataGridCoreView(props) {
   var _props$theme3;
+  const {
+    gridRef,
+    liveGridRef
+  } = props;
+  const handle = _react.default.useCallback(ref => {
+    if (ref) gridRef.current = ref.current;
+    if (liveGridRef) liveGridRef.current = ref;
+  }, [gridRef, liveGridRef]);
   return _react.default.createElement("div", {
     className: (0, _clsx.default)(props.className, 'azgrid-flexed', 'azgrid-flexlayout')
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
     ...props.static_gridOptions,
     ...props.dynamic_gridOptions,
     rowIndexColumn: props.static_gridOptions.rowIndexColumn || true,
-    handle: ref => {
-      if (ref) props.gridRef.current = ref.current;
-      if (props.liveGridRef) props.liveGridRef.current = ref;
-    },
+    handle: handle,
     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,

package/package.json

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

package/src/func/func_a11y.ts

@@ -115,6 +115,14 @@ export 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 function is_grid_busy(grid: GridType | null | undefined) {
+	return !!(grid as any)?.computedLoading;
+}
+
 /**
  * root element of the grid, null when it isn't mounted
  * @param grid computed props of the grid
@@ -136,6 +144,7 @@ export function get_root_a11y_key(grid: GridType | null | undefined, options: Ro
 		(g.visibleColumns || []).length,
 		options.ariaLabel ?? '',
 		options.editable ? 1 : 0,
+		is_grid_busy(g) ? 1 : 0,
 	].join('|');
 }
 
@@ -155,5 +164,6 @@ export function apply_root_a11y(grid: GridType | null | undefined, options: Root
 	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;
 }