@mui/x-data-grid 7.26.0 → 7.27.1

package/CHANGELOG.md

@@ -3,6 +3,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.27.1
+
+_Feb 25, 2025_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌍 Add Bangla (bn-BD) locale on the Data Grid and Date Pickers
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@nusr, @officialkidmax.
+Following are all team members who have contributed to this release:
+@bernardobelchior, @MBilalShafi, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.27.1`
+
+- [DataGrid] Fix the pagination unexpected behavior when using -1 for "All" rows per page (#16485) @nusr
+- [DataGrid] Extract `getRowId()` API method as a selector (#16574) @MBilalShafi
+- [DataGrid] Fix scrollbars overlapping cells on mount (#16653) @KenanYusuf
+- [l10n] Add Bangla (bn-BD) locale (#16649) @officialkidmax
+
+#### `@mui/x-data-grid-pro@7.27.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.27.1`.
+
+#### `@mui/x-data-grid-premium@7.27.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.27.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.27.1`
+
+- [l10n] Add Bangla (bn-BD) locale (#16649) @officialkidmax
+
+#### `@mui/x-date-pickers-pro@7.27.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.27.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.27.1`
+
+- [charts] Fix empty series array in pie chart (#16657) @bernardobelchior
+
+#### `@mui/x-charts-pro@7.27.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.27.1`.
+
+## 7.27.0
+
+_Feb 17, 2025_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Improve Data Grid Excel export serialization performance
+- 🐞 Bugfixes
+- 🌍 Improve Polish (pl-PL) and Ukrainian (uk-UA) locale on the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@pawelkula, @Neonin.
+Following are all team members who have contributed to this release:
+@cherniavskii, @JCQuintas, @oliviertassinari, @arminmeh and @LukasTy
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.27.0`
+
+- [DataGrid] Add `resetPageOnSortFilter` prop that resets the page after sorting and filtering (#16580) @arminmeh
+- [DataGrid] Avoid `undefined` value for pagination `rowCount` (#16558) @cherniavskii
+- [l10n] Improve Polish (pl-PL) locale (#16594) @pawelkula
+- [l10n] Improve Ukrainian (uk-UA) locale (#16593) @Neonin
+
+#### `@mui/x-data-grid-pro@7.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.27.0`.
+
+#### `@mui/x-data-grid-premium@7.27.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.27.0`, plus:
+
+- [DataGridPremium] Fix Excel export Web Worker demo not working in dev mode (#16532) @cherniavskii
+- [DataGridPremium] Improve Excel export serialization performance (#16545) @cherniavskii
+- [DataGridPremium] Namespace Excel export worker (#16539) @oliviertassinari
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.27.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.27.0`, plus:
+
+- [DateRangePicker] Avoid unnecessary field section focusing (#16569) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.27.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [charts-pro] Fix automatic type overloads (#16579) @JCQuintas
+
+### Core
+
+- [test] Fix Data Grid data source error test on React 18 (#16565) @arminmeh
+
 ## 7.26.0
 
 _Feb 7, 2025_

package/DataGrid/DataGrid.js

@@ -282,6 +282,8 @@ DataGridRaw.propTypes = {
   getRowHeight: PropTypes.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.func,
   /**
@@ -661,6 +663,12 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: PropTypes.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/DataGrid/useDataGridComponent.js

@@ -29,6 +29,7 @@ import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/
 import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
 import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/features/rows/useGridRowSpanning.js";
 import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
+import { propsStateInitializer } from "../hooks/core/useGridProps.js";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -41,10 +42,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);

package/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/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/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/constants/dataGridPropsDefaultValues.js

@@ -44,6 +44,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
+  resetPageOnSortFilter: false,
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,

package/hooks/core/gridPropsSelectors.d.ts

@@ -0,0 +1,9 @@
+import type { GridStateCommunity } from '../../models/gridStateCommunity';
+import type { GridRowId, GridRowModel } from '../../models/gridRows';
+/**
+ * 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 declare const gridRowIdSelector: <State extends GridStateCommunity>(state: State, row: GridRowModel) => GridRowId;

package/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/hooks/core/index.d.ts

@@ -1 +1,2 @@
 export type { GridPipeProcessingLookup } from './pipeProcessing';
+export { gridRowIdSelector } from './gridPropsSelectors';

package/hooks/core/index.js

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

package/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/hooks/core/useGridProps.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { DataGridProps } from '../../models/props/DataGridProps';
+import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import type { GridStateInitializer } from '../utils/useGridInitializeState';
+type Props = Pick<DataGridProps, 'getRowId'>;
+export declare const propsStateInitializer: GridStateInitializer<Props>;
+export declare const useGridProps: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>, props: Props) => void;
+export {};

package/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/hooks/features/clipboard/useGridClipboard.js

@@ -91,6 +91,6 @@ export const useGridClipboard = (apiRef, props) => {
       apiRef.current.publishEvent('clipboardCopy', textToCopy);
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridNativeEventListener(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
   useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/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/hooks/features/pagination/useGridPaginationModel.d.ts

@@ -8,4 +8,4 @@ export declare const getDerivedPaginationModel: (paginationState: GridPagination
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-export declare const useGridPaginationModel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "pagination" | "signature" | "rowHeight">) => void;
+export declare const useGridPaginationModel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "pagination" | "signature" | "rowHeight" | "resetPageOnSortFilter">) => void;

package/hooks/features/pagination/useGridPaginationModel.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { gridFilterModelSelector, gridFilterActiveItemsSelector } from "../filter/gridFilterSelector.js";
 import { gridDensityFactorSelector } from "../density/index.js";
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { isDeepEqual, runIf } from "../../../utils/utils.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPageCountSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from "./gridPaginationUtils.js";
@@ -14,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
@@ -31,6 +33,7 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
 export const useGridPaginationModel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPaginationModel');
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const previousFilterModel = React.useRef(gridFilterModelSelector(apiRef));
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   apiRef.current.registerControlState({
     stateId: 'paginationModel',
@@ -143,14 +146,55 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page === 0) {
+      return;
+    }
     const pageCount = gridPageCountSelector(apiRef);
     if (paginationModel.page > pageCount - 1) {
       apiRef.current.setPage(Math.max(0, pageCount - 1));
     }
   }, [apiRef]);
+
+  /**
+   * Goes to the first row of the grid
+   */
+  const navigateToStart = React.useCallback(() => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page !== 0) {
+      apiRef.current.setPage(0);
+    }
+
+    // If the page was not changed it might be needed to scroll to the top
+    const scrollPosition = apiRef.current.getScrollPosition();
+    if (scrollPosition.top !== 0) {
+      apiRef.current.scroll({
+        top: 0
+      });
+    }
+  }, [apiRef]);
+
+  /**
+   * Resets the page only if the active items or quick filter has changed from the last time.
+   * This is to avoid resetting the page when the filter model is changed
+   * because of and update of the operator from an item that does not have the value
+   * or reseting when the filter panel is just opened
+   */
+  const handleFilterModelChange = React.useCallback(filterModel => {
+    const currentActiveFilters = _extends({}, filterModel, {
+      // replace items with the active items
+      items: gridFilterActiveItemsSelector(apiRef)
+    });
+    if (isDeepEqual(currentActiveFilters, previousFilterModel.current)) {
+      return;
+    }
+    previousFilterModel.current = currentActiveFilters;
+    navigateToStart();
+  }, [apiRef, navigateToStart]);
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
   useGridApiEventHandler(apiRef, 'rowCountChange', handleRowCountChange);
+  useGridApiEventHandler(apiRef, 'sortModelChange', runIf(props.resetPageOnSortFilter, navigateToStart));
+  useGridApiEventHandler(apiRef, 'filterModelChange', runIf(props.resetPageOnSortFilter, handleFilterModelChange));
 
   /**
    * EFFECTS

package/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/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/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/hooks/utils/useGridNativeEventListener.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 export declare const useGridNativeEventListener: <PrivateApi extends GridPrivateApiCommon, K extends keyof HTMLElementEventMap>(apiRef: RefObject<PrivateApi>, ref: React.RefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: (event: HTMLElementEventMap[K]) => any, options?: AddEventListenerOptions) => void;

package/hooks/utils/useGridNativeEventListener.js

@@ -1,27 +1,17 @@
-import * as React from 'react';
-import { isFunction } from "../../utils/utils.js";
 import { useGridLogger } from "./useGridLogger.js";
+import { useGridApiOptionHandler } from "./useGridApiEventHandler.js";
 export const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
   const logger = useGridLogger(apiRef, 'useNativeEventListener');
-  const [added, setAdded] = React.useState(false);
-  const handlerRef = React.useRef(handler);
-  const targetElement = isFunction(ref) ? ref() : ref?.current ?? null;
-  const wrapHandler = React.useCallback(event => {
-    return handlerRef.current && handlerRef.current(event);
-  }, []);
-  React.useEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
-  React.useEffect(() => {
-    if (targetElement && eventName && !added) {
-      logger.debug(`Binding native ${eventName} event`);
-      targetElement.addEventListener(eventName, wrapHandler, options);
-      setAdded(true);
-      const unsubscribe = () => {
-        logger.debug(`Clearing native ${eventName} event`);
-        targetElement.removeEventListener(eventName, wrapHandler, options);
-      };
-      apiRef.current.subscribeEvent('unmount', unsubscribe);
+  useGridApiOptionHandler(apiRef, 'rootMount', () => {
+    const targetElement = typeof ref === 'function' ? ref() : ref.current;
+    if (!targetElement || !eventName || !handler) {
+      return undefined;
     }
-  }, [targetElement, wrapHandler, eventName, added, logger, options, apiRef]);
+    logger.debug(`Binding native ${eventName} event`);
+    targetElement.addEventListener(eventName, handler, options);
+    return () => {
+      logger.debug(`Clearing native ${eventName} event`);
+      targetElement.removeEventListener(eventName, handler, options);
+    };
+  });
 };

package/index.js

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

package/internals/index.d.ts

@@ -7,6 +7,7 @@ export type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 export { GridHeaders } from '../components/GridHeaders';
 export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
+export { propsStateInitializer } from '../hooks/core/useGridProps';
 export { getGridFilter } from '../components/panel/filterPanel/GridFilterPanel';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export type { GridPipeProcessor } from '../hooks/core/pipeProcessing';

package/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/locales/bnBD.d.ts

@@ -0,0 +1,2 @@
+import { Localization } from '../utils/getGridLocalization';
+export declare const bnBD: Localization;