@azrico/reactgrid 1.6.2 → 1.6.5

package/dist/src/example.js

@@ -30,6 +30,7 @@ const columns = [{
   title: 'Name',
   defaultFlex: 1
 }, {
+  // typed columns are editable without editableColumns, items keep their case
   name: 'job',
   title: 'Job',
   type: 'combo',
@@ -41,8 +42,20 @@ const columns = [{
   type: 'number',
   defaultFlex: 1,
   ariaLabel: value => `${value} years`
+}, {
+  // editable only for rows that are not saved yet (no id)
+  name: 'location',
+  title: 'Location',
+  type: 'select',
+  items: ['Shelf A', 'Shelf B', 'Back Room'],
+  editable: (value, cellProps) => {
+    var _cellProps$data;
+    return !(cellProps !== null && cellProps !== void 0 && (_cellProps$data = cellProps.data) !== null && _cellProps$data !== void 0 && _cellProps$data.id);
+  },
+  defaultFlex: 1
 }];
-const editableColumns = ['job', 'age'];
+// plain columns still need editableColumns
+const editableColumns = ['name'];
 function getData(delta, max = 200) {
   const fd = [];
   for (let index = 0; index < max; index++) {
@@ -50,7 +63,10 @@ function getData(delta, max = 200) {
       __table_id: String(index),
       name: 'user-' + index,
       age: 5 + index,
-      job: 'None'
+      job: 'None',
+      location: 'Shelf A',
+      // every third row is saved, its location is readonly
+      id: index % 3 == 0 ? 'saved-' + index : undefined
     };
     if (delta[index] && typeof delta[index] === 'object') {
       for (const key in delta[index]) {
@@ -139,6 +155,15 @@ function ExampleGrid() {
     return [{
       type: 'text',
       content: product.name
+    }, {
+      title: 'Log row',
+      onClick: row => console.log('context menu: log', row)
+    }, {
+      title: 'Copy name',
+      onClick: row => {
+        var _navigator$clipboard, _row$name;
+        return (_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(String((_row$name = row === null || row === void 0 ? void 0 : row.name) !== null && _row$name !== void 0 ? _row$name : ''));
+      }
     }];
   }, []);
   return _react.default.createElement("div", {

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

@@ -6,6 +6,8 @@ export type ColumnA11yOptions = {
     gridEditable?: boolean;
     /** false skips aria-readonly (for interactive special columns like the checkbox column) */
     markReadonly?: boolean;
+    /** column id when the column object has no id/name (inovua's special columns) */
+    id?: string;
 };
 /**
  * wraps column dom props to add ARIA attributes,
@@ -31,6 +33,18 @@ export type RootA11yOptions = {
     ariaLabel?: string;
     editable?: boolean;
 };
+/**
+ * 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
+ */
+export declare function apply_header_a11y(grid: GridType | null | undefined, root: Element): void;
+/**
+ * true when a header cell was (re)mounted without its aria-colindex
+ * @param root root element of the grid
+ */
+export declare function has_unsynced_header(root: Element | null): boolean;
 /**
  * true while the grid is loading (loading prop or async datasource)
  * @param grid computed props of the grid

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridEvents = useGridEvents;
 var _react = _interopRequireDefault(require("react"));
+var _object = require("@azrico/object");
 var _func_grid = require("../func/func_grid");
 var _func_child = require("../func/func_child");
 var _func_a11y = require("../func/func_a11y");
@@ -77,12 +78,23 @@ function useGridEvents(grid, props) {
   }, [props.dataSource]);
   /* ------------------------------- ContextMenu ------------------------------ */
   const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
-    if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
+    if (event.defaultPrevented || !rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
       update_menuRow(null, null);
       return true;
     }
-    event.preventDefault();
     const realRow = (0, _func_grid.find_realData)(rowProps.dataSourceArray, event.target, rowProps.data);
+    const items = (0, _object.fn_eval)(latestProps.current.contextMenuItems, realRow) || [];
+    const resolvedItems = (Array.isArray(items) ? items : [items]).map(item => {
+      const value = (0, _object.fn_eval)(item, realRow);
+      return typeof value === 'string' ? {
+        title: value
+      } : value;
+    }).filter(item => item != null && typeof item === 'object');
+    if (!resolvedItems.length) {
+      update_menuRow(null, null);
+      return true;
+    }
+    event.preventDefault();
     const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
     update_menuRow(realRow, anEl);
     return false;
@@ -100,13 +112,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",
+  }, props.contextMenuItems && _react.default.createElement(_contextMenu.ContextMenu, {
+    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.2",
+	"version": "1.6.5",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",