@azrico/reactgrid 1.6.1 → 1.6.4

package/dist/src/func/func_a11y.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.apply_column_a11y = apply_column_a11y;
+exports.apply_header_a11y = apply_header_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.has_unsynced_header = has_unsynced_header;
 exports.is_grid_busy = is_grid_busy;
 function set_default(target, key, value) {
   if (target[key] === undefined && value !== undefined && value !== null) target[key] = value;
@@ -38,11 +40,13 @@ function is_cell_readonly(cellProps, gridEditable) {
  * @returns a new column object
  */
 function apply_column_a11y(col, options = {}) {
+  var _ref, _col$id;
   const {
     role = 'gridcell',
     gridEditable = false,
     markReadonly = true
   } = options;
+  const id = (_ref = (_col$id = col.id) !== null && _col$id !== void 0 ? _col$id : col.name) !== null && _ref !== void 0 ? _ref : options.id;
   const consumerCellDOMProps = col.cellDOMProps;
   const consumerHeaderDOMProps = col.headerDOMProps;
   const ariaLabel = col.ariaLabel;
@@ -58,25 +62,40 @@ function apply_column_a11y(col, options = {}) {
       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;
-    }
+    headerDOMProps: get_header_dom_props(consumerHeaderDOMProps, id)
   };
 }
+/**
+ * header DOM props as an object (inovua's prop types reject a function),
+ * aria-colindex/aria-sort change with the grid state and are set by apply_header_a11y
+ * @param consumer consumer's headerDOMProps
+ * @param id column id, looked up in the grid's columnsMap
+ */
+function get_header_dom_props(consumer, id) {
+  //a consumer function is kept (inovua runs it), it gets the attributes from the cell props
+  if (typeof consumer === 'function') return cellProps => {
+    const res = resolve_dom_props(consumer, cellProps);
+    set_default(res, 'role', 'columnheader');
+    set_default(res, 'data-column', id);
+    set_default(res, 'aria-colindex', cellProps.computedVisibleIndex + 1);
+    if (cellProps.computedSortable) set_default(res, 'aria-sort', get_sort_dir(cellProps.computedSortInfo));
+    return res;
+  };
+  const res = resolve_dom_props(consumer, undefined);
+  set_default(res, 'role', 'columnheader');
+  set_default(res, 'data-column', id);
+  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;
+  var _ref2, _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;
+  const index = (_ref2 = (_rowProps$remoteRowIn = rowProps.remoteRowIndex) !== null && _rowProps$remoteRowIn !== void 0 ? _rowProps$remoteRowIn : rowProps.realIndex) !== null && _ref2 !== void 0 ? _ref2 : 0;
   rowProps['role'] = 'row';
   rowProps['aria-rowindex'] = index + 2; // 1-based, header row is 1
   if (selectionEnabled) rowProps['aria-selected'] = rowProps.selected ? 'true' : 'false';
@@ -101,6 +120,34 @@ function get_grid_row_count(grid) {
   const offset = g.computedLivePagination ? 0 : g.computedSkip || 0;
   return Math.max(g.paginationCount || 0, offset + rendered);
 }
+const HEADER_CELL_SELECTOR = '[role="columnheader"][data-column]';
+/**
+ * sets aria-colindex/aria-sort on the header cells of the grid,
+ * attributes the consumer set in an object headerDOMProps are left alone
+ * @param grid computed props of the grid
+ * @param root root element of the grid
+ */
+function apply_header_a11y(grid, root) {
+  const columnsMap = grid === null || grid === void 0 ? void 0 : grid.columnsMap;
+  if (!columnsMap) return;
+  root.querySelectorAll(HEADER_CELL_SELECTOR).forEach(el => {
+    //skip headers of grids nested in row details
+    if (el.closest('[role="grid"]') !== root) return;
+    const col = columnsMap[el.getAttribute('data-column')];
+    const own = col === null || col === void 0 ? void 0 : col.headerDOMProps;
+    //a function headerDOMProps sets the attributes itself
+    if (!own || typeof own !== 'object') return;
+    if (own['aria-colindex'] === undefined) set_attr(el, 'aria-colindex', col.computedVisibleIndex + 1);
+    if (own['aria-sort'] === undefined) set_attr(el, 'aria-sort', col.computedSortable ? get_sort_dir(col.computedSortInfo) : undefined);
+  });
+}
+/**
+ * true when a header cell was (re)mounted without its aria-colindex
+ * @param root root element of the grid
+ */
+function has_unsynced_header(root) {
+  return !!(root !== null && root !== void 0 && root.querySelector(`${HEADER_CELL_SELECTOR}:not([aria-colindex])`));
+}
 /**
  * true while the grid is loading (loading prop or async datasource)
  * @param grid computed props of the grid
@@ -125,7 +172,12 @@ 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('|');
+  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,
+  //header cells: order and sort direction
+  (g.visibleColumns || []).map(c => {
+    var _c$computedSortInfo;
+    return `${c.id}:${((_c$computedSortInfo = c.computedSortInfo) === null || _c$computedSortInfo === void 0 ? void 0 : _c$computedSortInfo.dir) || 0}`;
+  }).join(',')].join('|');
 }
 /**
  * sets ARIA attributes on the grid root element
@@ -144,5 +196,6 @@ function apply_root_a11y(grid, options) {
   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);
+  apply_header_a11y(g, el);
   return el;
 }

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

@@ -14,6 +14,12 @@ export declare function ApplyDataSource(datasource: any, props: any, remote?: {
  * @returns
  */
 export declare function applyColumnData(column_data: any): ColumnDefinition[];
+/**
+ * converts select items to an editor dataSource, plain values keep their case as the id
+ * @param arr
+ * @param idProperty
+ * @param valueAsID false uses generated ids instead of the values
+ */
 export declare function to_datasource(arr: any[], idProperty: string, valueAsID?: boolean): any[];
 /**
  * Gets name of a column from its column object

package/dist/src/func/func_grid.js

@@ -20,10 +20,10 @@ var _object = require("@azrico/object");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
 
+//editable is defaulted after types/extensions are applied, so they can tell if the consumer set it
 const defaultColumnOptions = {
   draggable: false,
-  lockable: false,
-  editable: false
+  lockable: false
 };
 async function ApplyDataSource(datasource, props, remote = {}) {
   let result_data = undefined;
@@ -90,6 +90,8 @@ function applyColumnData(column_data) {
   let editableColumns = column_data.editableColumns || [];
   let customColumns = column_data.customColumns || [];
   if (!Array.isArray(mcols)) return [];
+  //columns given as objects are readonly unless something makes them editable
+  const object_columns = new Set();
   /* ------------------------------- fix columns ------------------------------ */
   mcols.map(r => {
     if (r == null) return null;
@@ -108,6 +110,7 @@ function applyColumnData(column_data) {
         ...r,
         ...final_cl
       };
+      object_columns.add(final_cl);
       return final_cl;
     }
     return null;
@@ -182,8 +185,10 @@ function applyColumnData(column_data) {
           col.editor = _BoolEditor.default;
           break;
       }
-      if (col.editable != false) col.editable = true;
+      //typed columns are editable unless the consumer set editable (a function decides per cell)
+      if (col.editable === undefined) col.editable = true;
     }
+    if (col.editable === undefined && object_columns.has(col)) col.editable = false;
     //@ts-ignore
     if (!col.editorProps) col.editorProps = {};
     if (col.items) {
@@ -223,13 +228,19 @@ function applyColumnData(column_data) {
   //console.log(final_columns);
   return final_columns;
 }
+/**
+ * converts select items to an editor dataSource, plain values keep their case as the id
+ * @param arr
+ * @param idProperty
+ * @param valueAsID false uses generated ids instead of the values
+ */
 function to_datasource(arr, idProperty, valueAsID = true) {
   const res = [];
   let index = 0;
   if (Array.isArray(arr)) {
     arr.map(s => {
       let elem = {};
-      if (valueAsID) elem[idProperty] = String(s).toLowerCase();else elem[idProperty] = '_cid_' + index;
+      if (valueAsID) elem[idProperty] = String(s);else elem[idProperty] = '_cid_' + index;
       if (typeof s === 'object') elem = {
         ...elem,
         ...s

package/dist/src/hooks/useGridEvents.js

@@ -60,15 +60,16 @@ function useGridEvents(grid, props) {
       onRowDoubleClick
     } = latestProps.current;
     const nowDate = Date.now();
-    const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
+    const rowId = (0, _func_grid.get_row_id)(rowProps.data);
+    const lastclick = click_data.current[rowId];
     if (lastclick) {
       const diffTime = Math.abs(nowDate - lastclick);
       if (diffTime < 400) {
-        click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
+        click_data.current[rowId] = null;
         return onRowDoubleClick && onRowDoubleClick(rowProps.rowIndex, rowProps.data);
       }
     }
-    click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
+    click_data.current[rowId] = nowDate;
     return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
   }, []);
   _react.default.useEffect(() => {
@@ -99,13 +100,13 @@ function useGridEvents(grid, props) {
     ariaLabel: latestProps.current.ariaLabel,
     editable: !!latestProps.current.editable
   });
-  // root attributes are set on the DOM node, batched to once per frame
+  // root and header cell attributes are set on the DOM nodes, 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;
+    if (!force && key && key === lastRoot.current.key && (0, _func_a11y.get_grid_root)(grid) === lastRoot.current.el && !(0, _func_a11y.has_unsynced_header)(lastRoot.current.el)) return;
     rootSyncFrame.current = requestAnimationFrame(() => {
       var _latestProps$current$2;
       rootSyncFrame.current = 0;

package/dist/src/themes/azgrid-theme.css

@@ -1,7 +1,7 @@
 /* Token overrides for Inovua 5.10.2. Generated by config/generate-theme.cjs.
  * index.css retains layout and icons. Public tokens are inherited; preset tokens
  * are fallback implementation details. Do not set public defaults on the root. */
-.azgrid-scope, .azgrid, .azgrid-theme-light {
+.azgrid-scope, .azgrid, .azgrid-theme-light, .azgrid-context-menu {
 	--azgrid-preset-bg: #fff;
 	--azgrid-preset-fg: #555e68;
 	--azgrid-preset-border: #e4e3e2;
@@ -2010,23 +2010,18 @@
 .azgrid-scope .inovua-react-toolkit-menu {
 	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
 }
-/* Three classes exceed MUI's generated Paper/MenuItem selector specificity. */
-.azgrid-scope .azgrid-context-menu.MuiPaper-root {
-	background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
-	color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+/* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
+ * Two classes exceed @azrico/controls' single-class menu rules. */
+.azgrid-context-menu.azrico-controls-contextmenu {
+	--azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+	--azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
+	--azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
+	--azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
+	--azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	--azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
+	--azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
 	border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	box-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
-	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-}
-.azgrid-scope .azgrid-context-menu .MuiTypography-root,
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root {
-	color: inherit;
-	font-family: inherit;
-}
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root:hover,
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root.Mui-focusVisible {
-	background: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
 }
 .azgrid-scope, .azgrid-scope * {
 	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));

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

@@ -73,6 +73,8 @@ export type AzGridProps = {
     rightColumns?: string[];
     customColumns?: CustomColumnDefinition[];
     contextMenuItems?: ConvertableToMenuItem;
+    /** Extra classes on the row context menu, which is portaled to <body> */
+    contextMenuClassName?: string;
     highlightedRow?: any;
     RowDetail?: RowDetailsFunc;
     selected?: RowSelectionValue;
@@ -100,6 +102,8 @@ export type AzGridProps = {
     allowChildRows?: boolean;
     looseCacheCheck?: boolean;
     className?: string;
+    /** rendered after the grid, inside its container */
+    children?: React.ReactNode;
 };
 export type DataGridProps = ModifyFields<AzGridProps, {
     columns: ColumnDefinition[];

package/dist/src/views/DataGrid.js

@@ -11,7 +11,6 @@ require("../themes/grid.css");
 var _func_grid = require("../func/func_grid");
 var _contextMenu = require("@azrico/controls/context-menu");
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@mui/material/styles");
 var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _reactUseSize = require("react-use-size");
@@ -20,6 +19,8 @@ var _useColumnData = require("../hooks/useColumnData");
 var _useDatasource = require("../hooks/useDatasource");
 var _useGridSearch = require("../hooks/useGridSearch");
 var _func_a11y = require("../func/func_a11y");
+var _defaultRowIndexColumnId = require("@inovua/reactdatagrid-community/normalizeColumns/defaultRowIndexColumnId");
+var _defaultCheckColumnId = require("@inovua/reactdatagrid-community/normalizeColumns/defaultCheckColumnId");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
@@ -121,18 +122,6 @@ function AzGrid(props) {
  */
 function DataGridEventsWrapper(props) {
   var _props$theme;
-  const scopeRef = _react.default.useRef(null);
-  const hostTheme = (0, _styles.useTheme)();
-  // Keep the existing context menu and its portal in this grid's CSS scope.
-  const menuTheme = _react.default.useMemo(() => (0, _styles.createTheme)(hostTheme, {
-    components: {
-      MuiPopper: {
-        defaultProps: {
-          container: () => scopeRef.current
-        }
-      }
-    }
-  }), [hostTheme]);
   const themeClass = `azgrid-theme-${(_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : props.dark ? 'dark' : 'light'}`;
   /* -------------------------------------------------------------------------- */
   const {
@@ -176,12 +165,14 @@ function DataGridEventsWrapper(props) {
       },
       rowIndexColumn: (0, _func_a11y.apply_column_a11y)(typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {}, {
         role: 'rowheader',
-        gridEditable
+        gridEditable,
+        id: _defaultRowIndexColumnId.id
       })
     };
     if (opts.checkboxColumn) a11yProps.checkboxColumn = (0, _func_a11y.apply_column_a11y)(typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {}, {
       gridEditable,
-      markReadonly: false
+      markReadonly: false,
+      id: _defaultCheckColumnId.id
     });
     return {
       ...opts,
@@ -191,20 +182,17 @@ function DataGridEventsWrapper(props) {
     };
   }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask]);
   /* -------------------------------------------------------------------------- */
-  //TODO ContextMenu not from mui...
+  // The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
   return _react.default.createElement("div", {
-    ref: scopeRef,
     className: (0, _clsx.default)('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)
-  }, _react.default.createElement(_styles.ThemeProvider, {
-    theme: menuTheme
   }, _react.default.createElement(_contextMenu.ContextMenu, {
-    classname: "azgrid-context-menu",
+    classname: (0, _clsx.default)('azgrid-context-menu', themeClass, props.contextMenuClassName),
     menuAnchorEl: menuAnchorEl,
     menuRow: menuRow,
     close: update_menuRow,
     dontAutoClose: false,
     menu_items: props.contextMenuItems
-  })), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
+  }), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
     ...props,
     static_gridOptions: static_gridOptions
   }) : _react.default.createElement(DataGridSizeWrapper, {

package/package.json

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