@mui/x-data-grid 7.27.0 → 7.27.1

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -4,6 +4,7 @@ import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCell
 import { GridHeaderCheckbox } from "../components/columnSelection/GridHeaderCheckbox.js";
 import { selectedIdsLookupSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
 import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
@@ -22,7 +23,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = gridRowIdSelector(apiRef.current.state, row);
     return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),

package/modern/colDef/gridDateColDef.js

@@ -3,6 +3,7 @@ import { gridDateComparator } from "../hooks/features/sorting/gridSortingUtils.j
 import { getGridDateOperators } from "./gridDateOperators.js";
 import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
 import { renderEditDateCell } from "../components/cell/GridEditDateCell.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 function throwIfNotDateObject({
   value,
   columnType,
@@ -17,7 +18,7 @@ export const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = gridRowIdSelector(apiRef.current.state, row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
@@ -30,7 +31,7 @@ export const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = gridRowIdSelector(apiRef.current.state, row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',

package/modern/colDef/gridSingleSelectColDef.js

@@ -4,6 +4,7 @@ import { renderEditSingleSelectCell } from "../components/cell/GridEditSingleSel
 import { getGridSingleSelectOperators } from "./gridSingleSelectOperators.js";
 import { getValueOptions, isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 import { isObject } from "../utils/utils.js";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };
@@ -18,8 +19,7 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
   valueFormatter(value, row, colDef, apiRef) {
-    // const { id, field, value, api } = params;
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = gridRowIdSelector(apiRef.current.state, row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }

package/modern/hooks/core/gridPropsSelectors.js

@@ -0,0 +1,14 @@
+import { GRID_ID_AUTOGENERATED } from "../features/rows/gridRowsUtils.js";
+
+/**
+ * Get the row id for a given row
+ * @param state - The grid state
+ * @param {GridRowModel} row - The row to get the id for
+ * @returns {GridRowId} The row id
+ */
+export const gridRowIdSelector = (state, row) => {
+  if (GRID_ID_AUTOGENERATED in row) {
+    return row[GRID_ID_AUTOGENERATED];
+  }
+  return state.props.getRowId ? state.props.getRowId(row) : row.id;
+};

package/modern/hooks/core/index.js

@@ -1 +1 @@
-export {};
+export { gridRowIdSelector } from "./gridPropsSelectors.js";

package/modern/hooks/core/useGridInitialization.js

@@ -6,6 +6,7 @@ import { useGridLocaleText } from "./useGridLocaleText.js";
 import { useGridPipeProcessing } from "./pipeProcessing/index.js";
 import { useGridStrategyProcessing } from "./strategyProcessing/index.js";
 import { useGridStateInitialization } from "./useGridStateInitialization.js";
+import { useGridProps } from "./useGridProps.js";
 
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
@@ -13,6 +14,7 @@ import { useGridStateInitialization } from "./useGridStateInitialization.js";
 export const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
   useGridRefs(privateApiRef);
+  useGridProps(privateApiRef, props);
   useGridIsRtl(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef);

package/modern/hooks/core/useGridProps.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+export const propsStateInitializer = (state, props) => {
+  return _extends({}, state, {
+    props: {
+      getRowId: props.getRowId
+    }
+  });
+};
+export const useGridProps = (apiRef, props) => {
+  React.useEffect(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      props: {
+        getRowId: props.getRowId
+      }
+    }));
+  }, [apiRef, props.getRowId]);
+};

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -125,8 +125,7 @@ export function useGridDimensions(apiRef, props) {
     // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
     // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
     // https://github.com/mui/mui-x/issues/15721
-    const rootElement = apiRef.current.rootElementRef.current;
-    const scrollbarSize = measureScrollbarSize(rootElement, props.scrollbarSize);
+    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
     const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
@@ -287,28 +286,28 @@ function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
   };
 }
 const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(rootElement, scrollbarSize) {
+function measureScrollbarSize(element, scrollbarSize) {
   if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
-  if (rootElement === null) {
+  if (element === null) {
     return 0;
   }
-  const cachedSize = scrollbarSizeCache.get(rootElement);
+  const cachedSize = scrollbarSizeCache.get(element);
   if (cachedSize !== undefined) {
     return cachedSize;
   }
-  const doc = ownerDocument(rootElement);
+  const doc = ownerDocument(element);
   const scrollDiv = doc.createElement('div');
   scrollDiv.style.width = '99px';
   scrollDiv.style.height = '99px';
   scrollDiv.style.position = 'absolute';
   scrollDiv.style.overflow = 'scroll';
   scrollDiv.className = 'scrollDiv';
-  rootElement.appendChild(scrollDiv);
+  element.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  rootElement.removeChild(scrollDiv);
-  scrollbarSizeCache.set(rootElement, size);
+  element.removeChild(scrollDiv);
+  scrollbarSizeCache.set(element, size);
   return size;
 }
 function areElementSizesEqual(a, b) {

package/modern/hooks/features/pagination/useGridPaginationModel.js

@@ -16,7 +16,7 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
   if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
     paginationModel = paginationModelProp;
   }
-  const validPage = getValidPage(paginationModel.page, pageCount);
+  const validPage = pageSize === -1 ? 0 : getValidPage(paginationModel.page, pageCount);
   if (validPage !== paginationModel.page) {
     paginationModel = _extends({}, paginationModel, {
       page: validPage

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -114,7 +114,7 @@ export const useGridRowSelection = (apiRef, props) => {
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
     }
-    const rowNode = apiRef.current.getRowNode(id);
+    const rowNode = gridRowTreeSelector(apiRef)[id];
     if (rowNode?.type === 'footer' || rowNode?.type === 'pinnedRow') {
       return false;
     }
@@ -338,7 +338,7 @@ export const useGridRowSelection = (apiRef, props) => {
         return;
       }
     }
-    const rowNode = apiRef.current.getRowNode(params.id);
+    const rowNode = gridRowTreeSelector(apiRef)[params.id];
     if (rowNode.type === 'pinnedRow') {
       return;
     }

package/modern/hooks/features/rows/useGridRows.js

@@ -4,6 +4,7 @@ import useLazyRef from '@mui/utils/useLazyRef';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from "./gridRowsSelector.js";
+import { gridRowIdSelector } from "../../core/gridPropsSelectors.js";
 import { useTimeout } from "../../utils/useTimeout.js";
 import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
@@ -55,16 +56,7 @@ export const useGridRows = (apiRef, props) => {
     }
     return null;
   }, [apiRef]);
-  const getRowIdProp = props.getRowId;
-  const getRowId = React.useCallback(row => {
-    if (GRID_ID_AUTOGENERATED in row) {
-      return row[GRID_ID_AUTOGENERATED];
-    }
-    if (getRowIdProp) {
-      return getRowIdProp(row);
-    }
-    return row.id;
-  }, [getRowIdProp]);
+  const getRowId = React.useCallback(row => gridRowIdSelector(apiRef.current.state, row), [apiRef]);
   const throttledRowsChange = React.useCallback(({
     cache,
     throttle

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { warnOnce } from '@mui/x-internals/warning';
+import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {
@@ -39,7 +40,7 @@ const parseSortItem = (sortItem, apiRef) => {
   const getSortCellParams = id => ({
     id,
     field: column.field,
-    rowNode: apiRef.current.getRowNode(id),
+    rowNode: gridRowTreeSelector(apiRef)[id],
     value: apiRef.current.getCellValue(id, column.field),
     api: apiRef.current
   });

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.27.0
+ * @mui/x-data-grid v7.27.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -4,6 +4,7 @@ export { GridVirtualScrollerRenderZone } from "../components/virtualization/Grid
 export { GridHeaders } from "../components/GridHeaders.js";
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
+export { propsStateInitializer } from "../hooks/core/useGridProps.js";
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.js";
 export { useGridRegisterPipeProcessor } from "../hooks/core/pipeProcessing/index.js";
 export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../hooks/core/strategyProcessing/index.js";

package/modern/locales/bnBD.js

@@ -0,0 +1,154 @@
+import { bnBD as bnBDCore } from '@mui/material/locale';
+import { getGridLocalization } from "../utils/getGridLocalization.js";
+const bnBDGrid = {
+  // Root
+  noRowsLabel: 'কোনো সারি নেই',
+  noResultsOverlayLabel: 'কোনো ফলাফল পাওয়া যায়নি।',
+  // Density selector toolbar button text
+  toolbarDensity: 'ঘনত্ব',
+  toolbarDensityLabel: 'ঘনত্ব',
+  toolbarDensityCompact: 'সংকুচিত',
+  toolbarDensityStandard: 'মানক',
+  toolbarDensityComfortable: 'স্বাচ্ছন্দ্যদায়ক',
+  // Columns selector toolbar button text
+  toolbarColumns: 'কলাম',
+  toolbarColumnsLabel: 'কলাম নির্বাচন করুন',
+  // Filters toolbar button text
+  toolbarFilters: 'ফিল্টার',
+  toolbarFiltersLabel: 'ফিল্টার দেখান',
+  toolbarFiltersTooltipHide: 'ফিল্টার লুকান',
+  toolbarFiltersTooltipShow: 'ফিল্টার দেখান',
+  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} টি সক্রিয় ফিল্টার` : `${count} টি সক্রিয় ফিল্টার`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'অনুসন্ধান করুন…',
+  toolbarQuickFilterLabel: 'অনুসন্ধান',
+  toolbarQuickFilterDeleteIconLabel: 'পরিষ্কার করুন',
+  // Export selector toolbar button text
+  toolbarExport: 'এক্সপোর্ট',
+  toolbarExportLabel: 'এক্সপোর্ট',
+  toolbarExportCSV: 'CSV হিসাবে ডাউনলোড করুন',
+  toolbarExportPrint: 'প্রিন্ট করুন',
+  toolbarExportExcel: 'Excel হিসাবে ডাউনলোড করুন',
+  // Columns management text
+  columnsManagementSearchTitle: 'অনুসন্ধান',
+  columnsManagementNoColumns: 'কোনো কলাম নেই',
+  columnsManagementShowHideAllText: 'সব দেখান/লুকান',
+  columnsManagementReset: 'রিসেট',
+  columnsManagementDeleteIconLabel: 'পরিষ্কার',
+  // Filter panel text
+  filterPanelAddFilter: 'ফিল্টার যোগ করুন',
+  filterPanelRemoveAll: 'সব সরান',
+  filterPanelDeleteIconLabel: 'মুছুন',
+  filterPanelLogicOperator: 'লজিক অপারেটর',
+  filterPanelOperator: 'অপারেটর',
+  filterPanelOperatorAnd: 'এবং',
+  filterPanelOperatorOr: 'অথবা',
+  filterPanelColumns: 'কলাম',
+  filterPanelInputLabel: 'মান',
+  filterPanelInputPlaceholder: 'ফিল্টার মান',
+  // Filter operators text
+  filterOperatorContains: 'অন্তর্ভুক্ত',
+  filterOperatorDoesNotContain: 'অন্তর্ভুক্ত নয়',
+  filterOperatorEquals: 'সমান',
+  filterOperatorDoesNotEqual: 'সমান নয়',
+  filterOperatorStartsWith: 'দিয়ে শুরু হয়',
+  filterOperatorEndsWith: 'দিয়ে শেষ হয়',
+  filterOperatorIs: 'হচ্ছে',
+  filterOperatorNot: 'হচ্ছে না',
+  filterOperatorAfter: 'পরবর্তী',
+  filterOperatorOnOrAfter: 'এই তারিখ বা পরবর্তী',
+  filterOperatorBefore: 'পূর্ববর্তী',
+  filterOperatorOnOrBefore: 'এই তারিখ বা পূর্ববর্তী',
+  filterOperatorIsEmpty: 'খালি',
+  filterOperatorIsNotEmpty: 'খালি নয়',
+  filterOperatorIsAnyOf: 'এর যেকোনো একটি',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: 'অন্তর্ভুক্ত',
+  headerFilterOperatorDoesNotContain: 'অন্তর্ভুক্ত নয়',
+  headerFilterOperatorEquals: 'সমান',
+  headerFilterOperatorDoesNotEqual: 'সমান নয়',
+  headerFilterOperatorStartsWith: 'দিয়ে শুরু হয়',
+  headerFilterOperatorEndsWith: 'দিয়ে শেষ হয়',
+  headerFilterOperatorIs: 'হচ্ছে',
+  headerFilterOperatorNot: 'হচ্ছে না',
+  headerFilterOperatorAfter: 'পরবর্তী',
+  headerFilterOperatorOnOrAfter: 'এই তারিখ বা পরবর্তী',
+  headerFilterOperatorBefore: 'পূর্ববর্তী',
+  headerFilterOperatorOnOrBefore: 'এই তারিখ বা পূর্ববর্তী',
+  headerFilterOperatorIsEmpty: 'খালি',
+  headerFilterOperatorIsNotEmpty: 'খালি নয়',
+  headerFilterOperatorIsAnyOf: 'এর যেকোনো একটি',
+  'headerFilterOperator=': 'সমান',
+  'headerFilterOperator!=': 'সমান নয়',
+  'headerFilterOperator>': 'বড়',
+  'headerFilterOperator>=': 'বড় বা সমান',
+  'headerFilterOperator<': 'ছোট',
+  'headerFilterOperator<=': 'ছোট বা সমান',
+  // Filter values text
+  filterValueAny: 'যেকোনো',
+  filterValueTrue: 'সত্য',
+  filterValueFalse: 'মিথ্যা',
+  // Column menu text
+  columnMenuLabel: 'মেনু',
+  columnMenuShowColumns: 'কলাম দেখান',
+  columnMenuManageColumns: 'কলাম পরিচালনা করুন',
+  columnMenuFilter: 'ফিল্টার',
+  columnMenuHideColumn: 'কলাম লুকান',
+  columnMenuUnsort: 'সাজানো বাতিল করুন',
+  columnMenuSortAsc: 'ASC অনুযায়ী সাজান',
+  columnMenuSortDesc: 'DESC অনুযায়ী সাজান',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} টি সক্রিয় ফিল্টার` : `${count} টি সক্রিয় ফিল্টার`,
+  columnHeaderFiltersLabel: 'ফিল্টার দেখান',
+  columnHeaderSortIconLabel: 'সাজান',
+  // Rows selected footer text
+  footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} টি সারি নির্বাচিত` : `${count.toLocaleString()} টি সারি নির্বাচিত`,
+  // Total row amount footer text
+  footerTotalRows: 'মোট সারি:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} of ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: 'চেকবক্স নির্বাচন',
+  checkboxSelectionSelectAllRows: 'সব সারি নির্বাচন করুন',
+  checkboxSelectionUnselectAllRows: 'সব সারি নির্বাচন বাতিল করুন',
+  checkboxSelectionSelectRow: 'সারি নির্বাচন করুন',
+  checkboxSelectionUnselectRow: 'সারি নির্বাচন বাতিল করুন',
+  // Boolean cell text
+  booleanCellTrueLabel: 'হ্যাঁ',
+  booleanCellFalseLabel: 'না',
+  // Actions cell more text
+  actionsCellMore: 'আরও',
+  // Column pinning text
+  pinToLeft: 'বাঁ দিকে পিন করুন',
+  pinToRight: 'ডান দিকে পিন করুন',
+  unpin: 'আনপিন করুন',
+  // Tree Data
+  treeDataGroupingHeaderName: 'গ্রুপ',
+  // treeDataExpand: 'see children',
+  // treeDataCollapse: 'hide children',
+
+  // Grouping columns
+  groupingColumnHeaderName: 'গ্রুপ',
+  groupColumn: name => `${name} অনুসারে গ্রুপ করুন`,
+  unGroupColumn: name => `${name} অনুসারে গ্রুপ বন্ধ করুন`,
+  // Master/detail
+  detailPanelToggle: 'বিস্তারিত প্যানেল টগল করুন',
+  expandDetailPanel: 'সম্প্রসারিত করুন',
+  collapseDetailPanel: 'সংকুচিত করুন',
+  // Row reordering text
+  rowReorderingHeaderName: 'সারি পুনর্বিন্যাস',
+  // Aggregation
+  aggregationMenuItemHeader: 'সংকলন',
+  aggregationFunctionLabelSum: 'যোগফল',
+  aggregationFunctionLabelAvg: 'গড়',
+  aggregationFunctionLabelMin: 'সর্বনিম্ন',
+  aggregationFunctionLabelMax: 'সর্বোচ্চ',
+  aggregationFunctionLabelSize: 'মাপ'
+};
+export const bnBD = getGridLocalization(bnBDGrid, bnBDCore);

package/modern/locales/index.js

@@ -2,6 +2,7 @@
 export * from "./arSD.js";
 export * from "./beBY.js";
 export * from "./bgBG.js";
+export * from "./bnBD.js";
 export * from "./csCZ.js";
 export * from "./daDK.js";
 export * from "./deDE.js";

package/node/DataGrid/DataGrid.js

@@ -289,6 +289,8 @@ DataGridRaw.propTypes = {
   getRowHeight: _propTypes.default.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: _propTypes.default.func,
   /**

package/node/DataGrid/useDataGridComponent.js

@@ -35,6 +35,7 @@ var _virtualization = require("../hooks/features/virtualization");
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
 var _useGridListView = require("../hooks/features/listView/useGridListView");
+var _useGridProps = require("../hooks/core/useGridProps");
 const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = (0, _useGridInitialization.useGridInitialization)(inputApiRef, props);
 
@@ -47,6 +48,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridProps.propsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -12,6 +12,7 @@ var _GridCellCheckboxRenderer = require("../components/columnSelection/GridCellC
 var _GridHeaderCheckbox = require("../components/columnSelection/GridHeaderCheckbox");
 var _gridRowSelectionSelector = require("../hooks/features/rowSelection/gridRowSelectionSelector");
 var _gridBooleanColDef = require("./gridBooleanColDef");
+var _gridPropsSelectors = require("../hooks/core/gridPropsSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const GRID_CHECKBOX_SELECTION_FIELD = exports.GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanColDef.GRID_BOOLEAN_COL_DEF, {
@@ -30,7 +31,7 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = (0, _gridPropsSelectors.gridRowIdSelector)(apiRef.current.state, row);
     return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderCheckbox.GridHeaderCheckbox, (0, _extends2.default)({}, params)),

package/node/colDef/gridDateColDef.js

@@ -10,6 +10,7 @@ var _gridSortingUtils = require("../hooks/features/sorting/gridSortingUtils");
 var _gridDateOperators = require("./gridDateOperators");
 var _gridStringColDef = require("./gridStringColDef");
 var _GridEditDateCell = require("../components/cell/GridEditDateCell");
+var _gridPropsSelectors = require("../hooks/core/gridPropsSelectors");
 function throwIfNotDateObject({
   value,
   columnType,
@@ -24,7 +25,7 @@ const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = (0, _gridPropsSelectors.gridRowIdSelector)(apiRef.current.state, row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
@@ -38,7 +39,7 @@ const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const rowId = (0, _gridPropsSelectors.gridRowIdSelector)(apiRef.current.state, row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',

package/node/colDef/gridSingleSelectColDef.js

@@ -11,6 +11,7 @@ var _GridEditSingleSelectCell = require("../components/cell/GridEditSingleSelect
 var _gridSingleSelectOperators = require("./gridSingleSelectOperators");
 var _filterPanelUtils = require("../components/panel/filterPanel/filterPanelUtils");
 var _utils = require("../utils/utils");
+var _gridPropsSelectors = require("../hooks/core/gridPropsSelectors");
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };
@@ -25,8 +26,7 @@ const GRID_SINGLE_SELECT_COL_DEF = exports.GRID_SINGLE_SELECT_COL_DEF = (0, _ext
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
   valueFormatter(value, row, colDef, apiRef) {
-    // const { id, field, value, api } = params;
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = (0, _gridPropsSelectors.gridRowIdSelector)(apiRef.current.state, row);
     if (!(0, _filterPanelUtils.isSingleSelectColDef)(colDef)) {
       return '';
     }

package/node/hooks/core/gridPropsSelectors.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridRowIdSelector = void 0;
+var _gridRowsUtils = require("../features/rows/gridRowsUtils");
+/**
+ * Get the row id for a given row
+ * @param state - The grid state
+ * @param {GridRowModel} row - The row to get the id for
+ * @returns {GridRowId} The row id
+ */
+const gridRowIdSelector = (state, row) => {
+  if (_gridRowsUtils.GRID_ID_AUTOGENERATED in row) {
+    return row[_gridRowsUtils.GRID_ID_AUTOGENERATED];
+  }
+  return state.props.getRowId ? state.props.getRowId(row) : row.id;
+};
+exports.gridRowIdSelector = gridRowIdSelector;

package/node/hooks/core/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "gridRowIdSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridPropsSelectors.gridRowIdSelector;
+  }
+});
+var _gridPropsSelectors = require("./gridPropsSelectors");

package/node/hooks/core/useGridInitialization.js

@@ -12,12 +12,14 @@ var _useGridLocaleText = require("./useGridLocaleText");
 var _pipeProcessing = require("./pipeProcessing");
 var _strategyProcessing = require("./strategyProcessing");
 var _useGridStateInitialization = require("./useGridStateInitialization");
+var _useGridProps = require("./useGridProps");
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
 const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(inputApiRef, props);
   (0, _useGridRefs.useGridRefs)(privateApiRef);
+  (0, _useGridProps.useGridProps)(privateApiRef, props);
   (0, _useGridIsRtl.useGridIsRtl)(privateApiRef);
   (0, _useGridLoggerFactory.useGridLoggerFactory)(privateApiRef, props);
   (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef);

package/node/hooks/core/useGridProps.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridProps = exports.propsStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+const propsStateInitializer = (state, props) => {
+  return (0, _extends2.default)({}, state, {
+    props: {
+      getRowId: props.getRowId
+    }
+  });
+};
+exports.propsStateInitializer = propsStateInitializer;
+const useGridProps = (apiRef, props) => {
+  React.useEffect(() => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      props: {
+        getRowId: props.getRowId
+      }
+    }));
+  }, [apiRef, props.getRowId]);
+};
+exports.useGridProps = useGridProps;

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -135,8 +135,7 @@ function useGridDimensions(apiRef, props) {
     // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
     // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
     // https://github.com/mui/mui-x/issues/15721
-    const rootElement = apiRef.current.rootElementRef.current;
-    const scrollbarSize = measureScrollbarSize(rootElement, props.scrollbarSize);
+    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
     const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state);
     const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
     const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
@@ -297,28 +296,28 @@ function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
   };
 }
 const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(rootElement, scrollbarSize) {
+function measureScrollbarSize(element, scrollbarSize) {
   if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
-  if (rootElement === null) {
+  if (element === null) {
     return 0;
   }
-  const cachedSize = scrollbarSizeCache.get(rootElement);
+  const cachedSize = scrollbarSizeCache.get(element);
   if (cachedSize !== undefined) {
     return cachedSize;
   }
-  const doc = (0, _utils.unstable_ownerDocument)(rootElement);
+  const doc = (0, _utils.unstable_ownerDocument)(element);
   const scrollDiv = doc.createElement('div');
   scrollDiv.style.width = '99px';
   scrollDiv.style.height = '99px';
   scrollDiv.style.position = 'absolute';
   scrollDiv.style.overflow = 'scroll';
   scrollDiv.className = 'scrollDiv';
-  rootElement.appendChild(scrollDiv);
+  element.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  rootElement.removeChild(scrollDiv);
-  scrollbarSizeCache.set(rootElement, size);
+  element.removeChild(scrollDiv);
+  scrollbarSizeCache.set(element, size);
   return size;
 }
 function areElementSizesEqual(a, b) {