@mui/x-data-grid-pro 7.0.0-beta.4 → 7.0.0-beta.5

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.5
+
+_Mar 1, 2024_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii
+- 🚀 Add `use client` directive to the Grid packages (#11803) @MBilalShafi
+- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.0.0-beta.5`
+
+- [DataGrid] Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii
+- [DataGrid] Add `use client` directive to the Grid packages (#11803) @MBilalShafi
+- [DataGrid] Fix `disableResetButton` and `disableShowHideToggle` flags to not exclude each other (#12169) @adyry
+- [DataGrid] Fix cell range classnames (#12230) @romgrk
+- [DataGrid] Fix wrong offset for right-pinned columns when toggling dark/light modes (#12233) @cherniavskii
+- [DataGrid] Improve row virtualization and rendering performance (#12247) @romgrk
+- [DataGrid] Improve performance by removing `querySelector` call (#12229) @romgrk
+- [DataGrid] Fix `onColumnWidthChange` called before autosize affects column width (#12140) @shaharyar-shamshi
+- [DataGrid] Fix boolean "is" filter (#12117) @shaharyar-shamshi
+- [DataGrid] Fix `upsertFilterItems` removing filters that are not part of the update (#11954) @gitstart
+- [DataGrid] Render scrollbars only if there is scroll (#12265) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.5` [![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.0.0-beta.5`, plus:
+
+- [DataGridPro] Fix column resize errors on MacOS with automatic scrollbars enabled (#12217) @cherniavskii
+- [DataGridPro] Fix lazy-loading crash (#12080) @romgrk
+- [DataGridPro] Fix useGridRows not giving error on reversed data (#10821) @martijn-basesoft
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.5` [![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.0.0-beta.5`, plus:
+
+- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12235) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.5`
+
+- [pickers] Fix toolbar components props handling (#12211) @LukasTy
+- [l10n] Improve Chinese (zh-CN) locale (#12245) @headironc
+- [l10n] Improve Korean (ko-KR) locale (#12192) @Luzi
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.5` [![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.0.0-beta.5`.
+
+- [DateTimeRangePicker] Fix validation behavior (#12243) @LukasTy
+
+### Charts / `@mui/x-charts@7.0.0-beta.5`
+
+- [charts] Fix grid duplicated key (#12208) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.5`
+
+- [TreeView] Add public API and expose focus method (#12143) @noraleonte
+
+### Docs
+
+- [docs] Fix image layout shift when loading @oliviertassinari
+- [docs] Match Material UI repo comment for redirections @oliviertassinari
+- [docs] Non breaking spaces @oliviertassinari
+- [docs] Polish the Date Picker playground (#11869) @zanivan
+- [docs] Standardize WAI-ARIA references @oliviertassinari
+
+### Core
+
+- [core] Allow local docs next.js settings (#12227) @romgrk
+- [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
+- [core] Remove `window.` reference for common globals @oliviertassinari
+- [core] Use runtime agnostic setTimeout type @oliviertassinari
+- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
+- [docs-infra] Fix missing non breaking spaces @oliviertassinari
+- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Fix missing permission reset @oliviertassinari
+
 ## 7.0.0-beta.4
 
 _Feb 23, 2024_
@@ -49,7 +132,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
    <DateField
   -  selectedSections={{ startIndex: 0, endIndex: 0 }}
   +  selectedSections={0}
-  
+
      // If the field has 3 sections
   -  selectedSections={{ startIndex: 0, endIndex: 2 }}
   +  selectedSections="all"
@@ -68,20 +151,20 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
   +     enableAccessibleFieldDOMStructure,
         // ... rest of the props you are using
       } = props;
-  
+
       return ( /* Some UI to edit the date */ )
     }
-  
+
     function MyCustomField(props) {
       const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
         ...props,
   +     // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
   +     enableAccessibleFieldDOMStructure: false,
       });
-  
+
       return <MyCustomTextField ref={ref} {...fieldResponse} />;
     }
-  
+
     function App() {
       return <DatePicker slots={{ field: MyCustomField }} />;
     }
@@ -2352,6 +2435,47 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.6
+
+_Mar 1, 2024_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.6`
+
+- [DataGrid] Fix error when existing rows are passed to `replaceRows` (@martijn-basesoft)
+
+#### `@mui/x-data-grid-pro@6.19.6` [![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@6.19.6`.
+
+#### `@mui/x-data-grid-premium@6.19.6` [![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@6.19.6`, plus:
+
+- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12255) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.6`
+
+- [l10n] Improve Chinese (zh-CN) locale (#12250) @headironc
+- [l10n] Improve Korean (ko-KR) locale (#12186) @Luzi
+
+#### `@mui/x-date-pickers-pro@6.19.6` [![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@6.19.6`.
+
+### Docs
+
+- [docs] Update lazy loading demo to show skeleton rows during initial rows fetch (#12062) @cherniavskii
+
 ## 6.19.5
 
 _Feb 23, 2024_
@@ -2394,8 +2518,8 @@ Same changes as in `@mui/x-date-pickers@6.19.5`.
 
 - [docs] Clarify Pickers 'Component composition' section (#12147) @LukasTy
 - [docs] Fix 301 redirection to StackBlitz @oliviertassinari
-- [docs] Fix 301 to Material UI @oliviertassinari
-- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
 - [docs] Fix 404 links to translation source @oliviertassinari
 - [docs] Fix dead link to translations @oliviertassinari
 - [docs] Fix the Treemap illustration (#12189) @danilo-leal
@@ -4264,7 +4388,7 @@ We'd like to offer a big thanks to the 13 contributors who made this release pos
 
 #### `@mui/x-data-grid@6.9.1`
 
-- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
+- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
 - [DataGrid] Add section about enabling pagination on Pro and Premium (#8759) @joserodolfofreitas
 - [DataGrid] Don't forward `editCellState` prop to DOM element (#9501) @m4theushw
 - [DataGrid] Add experimental API for faster filtering performance (#9254) @romgrk
@@ -4395,7 +4519,7 @@ Same changes as in `@mui/x-date-pickers@6.9.0`.
 - [docs] Fix random screenshot generation (#9364) @cherniavskii
 - [docs] Remove random generation from chart doc example (#9343) @flaviendelangle
 - [docs] Sync h1 with sidenav link (#9252) @oliviertassinari
-- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari
+- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari
 
 ### Core
 
@@ -4722,8 +4846,8 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 - [DataGrid] Fix DataGrid rendering in JSDOM (#8968) @cherniavskii
 - [DataGrid] Fix layout when rendered inside a parent with `display: grid` (#8577) @cherniavskii
-- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp
-- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii
+- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp
+- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii
 - [DataGrid] Extract `baseChip` slot (#8748) @cherniavskii
 - [DataGridPremium] Implement Clipboard import (#7389) @cherniavskii
 - [l10n] Improve French (fr-FR) locale (#8825) @allereaugabriel
@@ -4773,7 +4897,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 - [DataGrid] Fix falsy filter values not showing in filter button tooltip (#8550) @ithrforu
 - [DataGrid] Fix missing watermark in Pro and Premium packages (#8797) @cherniavskii
 - [DataGrid] Remove unwarranted warning log (#8847) @romgrk
-- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
+- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
 - [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows` (#8823) @cherniavskii
 
 ### `@mui/x-date-pickers@6.3.1` / `@mui/x-date-pickers-pro@6.3.1`
@@ -4824,7 +4948,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [DataGrid] Add overlay classes to `gridClasses` (#8686) @lindapaiste
 - [DataGrid] Avoid passing `api` prop to div (#8679) @someden
 - [DataGrid] Fix 'ResizeObserver loop limit exceeded' error (#8744) @m4theushw
-- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
+- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
 - [DataGrid] Fix aggregation label alignment (#8694) @joserodolfofreitas
 - [DataGridPremium] Fix infinite loop when updating grouped rows (#8693) @cherniavskii
 - [DataGridPro] Fix error after updating `columns` and `columnGroupingModel` at once (#8730) @cherniavskii
@@ -4886,7 +5010,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 #### Changes
 
 - [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi
-- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
+- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
 - [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon
 - [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw
 - [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw

package/DataGridPro/DataGridPro.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/components/GridPinnedRows.js

@@ -30,10 +30,18 @@ function GridPinnedRows(_ref) {
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const classes = useUtilityClasses();
   const apiRef = (0, _internals.useGridPrivateApiContext)();
+  const renderContext = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridRenderContextSelector);
   const pinnedRowsData = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridPinnedRowsSelector);
+  const rows = pinnedRowsData[position];
   const pinnedRows = virtualScroller.getRows({
     position,
-    rows: pinnedRowsData[position]
+    rows,
+    renderContext: React.useMemo(() => ({
+      firstRowIndex: 0,
+      lastRowIndex: rows.length,
+      firstColumnIndex: renderContext.firstColumnIndex,
+      lastColumnIndex: renderContext.lastColumnIndex
+    }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex])
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({}, other, {
     className: (0, _clsx.default)(classes.root, other.className, _xDataGrid.gridClasses[`pinnedRows--${position}`]),

package/esm/DataGridPro/DataGridPro.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/esm/components/GridPinnedRows.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-data-grid';
-import { gridPinnedRowsSelector, useGridPrivateApiContext } from '@mui/x-data-grid/internals';
+import { gridPinnedRowsSelector, gridRenderContextSelector, useGridPrivateApiContext } from '@mui/x-data-grid/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {
@@ -21,10 +21,18 @@ export function GridPinnedRows(_ref) {
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const classes = useUtilityClasses();
   const apiRef = useGridPrivateApiContext();
+  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const rows = pinnedRowsData[position];
   const pinnedRows = virtualScroller.getRows({
     position,
-    rows: pinnedRowsData[position]
+    rows,
+    renderContext: React.useMemo(() => ({
+      firstRowIndex: 0,
+      lastRowIndex: rows.length,
+      firstColumnIndex: renderContext.firstColumnIndex,
+      lastColumnIndex: renderContext.lastColumnIndex
+    }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex])
   });
   return /*#__PURE__*/_jsx("div", _extends({}, other, {
     className: clsx(classes.root, other.className, gridClasses[`pinnedRows--${position}`]),

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -177,6 +177,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const theme = useTheme();
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
+  const previousMouseClickEvent = React.useRef();
   const columnHeaderElementRef = React.useRef();
   const headerFilterElementRef = React.useRef();
   const groupHeaderElementsRef = React.useRef([]);
@@ -252,6 +253,20 @@ export const useGridColumnResize = (apiRef, props) => {
   const finishResize = nativeEvent => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
+
+    // Prevent double-clicks from being interpreted as two separate clicks
+    if (previousMouseClickEvent.current) {
+      const prevEvent = previousMouseClickEvent.current;
+      const prevTimeStamp = prevEvent.timeStamp;
+      const prevClientX = prevEvent.clientX;
+      const prevClientY = prevEvent.clientY;
+
+      // Check if the current event is part of a double-click
+      if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
+        previousMouseClickEvent.current = undefined;
+        return;
+      }
+    }
     if (colDefRef.current) {
       apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
       logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
@@ -407,6 +422,7 @@ export const useGridColumnResize = (apiRef, props) => {
     storeReferences(colDef, event.currentTarget, event.clientX);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
+    previousMouseClickEvent.current = event.nativeEvent;
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
 
@@ -479,6 +495,16 @@ export const useGridColumnResize = (apiRef, props) => {
         }
       }
       apiRef.current.updateColumns(newColumns);
+      newColumns.forEach((newColumn, index) => {
+        if (newColumn.width !== columns[index].width) {
+          const width = newColumn.width;
+          apiRef.current.publishEvent('columnWidthChange', {
+            element: apiRef.current.getColumnHeaderElement(newColumn.field),
+            colDef: newColumn,
+            width
+          });
+        }
+      });
     } finally {
       apiRef.current.unstable_setColumnVirtualization(true);
       isAutosizingRef.current = false;
@@ -514,5 +540,8 @@ export const useGridColumnResize = (apiRef, props) => {
   useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };
 function updateProperty(element, property, delta) {
+  if (!element) {
+    return;
+  }
   element.style[property] = `${parseInt(element.style[property], 10) + delta}px`;
 }

package/esm/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridApiEventHandler, useGridSelector, gridSortModelSelector, gridFilterModelSelector, gridRenderContextSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
-import { useGridVisibleRows } from '@mui/x-data-grid/internals';
+import { getVisibleRows } from '@mui/x-data-grid/internals';
 function findSkeletonRowsSection({
   apiRef,
   visibleRows,
@@ -37,10 +37,9 @@ function findSkeletonRowsSection({
 }
 function isLazyLoadingDisabled({
   lazyLoadingFeatureFlag,
-  rowsLoadingMode,
-  gridDimensions
+  rowsLoadingMode
 }) {
-  if (!lazyLoadingFeatureFlag || !gridDimensions) {
+  if (!lazyLoadingFeatureFlag) {
     return true;
   }
   if (rowsLoadingMode !== 'server') {
@@ -57,7 +56,6 @@ function isLazyLoadingDisabled({
  */
 export const useGridLazyLoader = (privateApiRef, props) => {
   var _props$experimentalFe;
-  const visibleRows = useGridVisibleRows(privateApiRef, props);
   const sortModel = useGridSelector(privateApiRef, gridSortModelSelector);
   const filterModel = useGridSelector(privateApiRef, gridFilterModelSelector);
   const renderedRowsIntervalCache = React.useRef({
@@ -67,13 +65,12 @@ export const useGridLazyLoader = (privateApiRef, props) => {
   const {
     lazyLoading
   } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
+  const isDisabled = isLazyLoadingDisabled({
+    lazyLoadingFeatureFlag: lazyLoading,
+    rowsLoadingMode: props.rowsLoadingMode
+  });
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     const fetchRowsParams = {
@@ -85,10 +82,18 @@ export const useGridLazyLoader = (privateApiRef, props) => {
     if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowIndex) {
       return;
     }
+    renderedRowsIntervalCache.current = {
+      firstRowToRender: params.firstRowIndex,
+      lastRowToRender: params.lastRowIndex
+    };
     if (sortModel.length === 0 && filterModel.items.length === 0) {
+      const currentVisibleRows = getVisibleRows(privateApiRef, {
+        pagination: props.pagination,
+        paginationMode: props.paginationMode
+      });
       const skeletonRowsSection = findSkeletonRowsSection({
         apiRef: privateApiRef,
-        visibleRows: visibleRows.rows,
+        visibleRows: currentVisibleRows.rows,
         range: {
           firstRowIndex: params.firstRowIndex,
           lastRowIndex: params.lastRowIndex
@@ -100,19 +105,10 @@ export const useGridLazyLoader = (privateApiRef, props) => {
       fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
       fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
     }
-    renderedRowsIntervalCache.current = {
-      firstRowToRender: params.firstRowIndex,
-      lastRowToRender: params.lastRowIndex
-    };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, sortModel, filterModel, visibleRows.rows, lazyLoading]);
+  }, [privateApiRef, isDisabled, props.pagination, props.paginationMode, sortModel, filterModel]);
   const handleGridSortModelChange = React.useCallback(newSortModel => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
@@ -124,14 +120,9 @@ export const useGridLazyLoader = (privateApiRef, props) => {
       filterModel
     };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, filterModel, lazyLoading]);
+  }, [privateApiRef, isDisabled, filterModel]);
   const handleGridFilterModelChange = React.useCallback(newFilterModel => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
@@ -143,7 +134,7 @@ export const useGridLazyLoader = (privateApiRef, props) => {
       filterModel: newFilterModel
     };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, sortModel, lazyLoading]);
+  }, [privateApiRef, isDisabled, sortModel]);
   useGridApiEventHandler(privateApiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
   useGridApiEventHandler(privateApiRef, 'sortModelChange', handleGridSortModelChange);
   useGridApiEventHandler(privateApiRef, 'filterModelChange', handleGridFilterModelChange);

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwODYyODQwMDAwMA==";
+  const releaseInfo = "MTcwOTM1NTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/hooks/features/columnResize/useGridColumnResize.js

@@ -185,6 +185,7 @@ const useGridColumnResize = (apiRef, props) => {
   const theme = (0, _styles.useTheme)();
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
+  const previousMouseClickEvent = React.useRef();
   const columnHeaderElementRef = React.useRef();
   const headerFilterElementRef = React.useRef();
   const groupHeaderElementsRef = React.useRef([]);
@@ -260,6 +261,20 @@ const useGridColumnResize = (apiRef, props) => {
   const finishResize = nativeEvent => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
+
+    // Prevent double-clicks from being interpreted as two separate clicks
+    if (previousMouseClickEvent.current) {
+      const prevEvent = previousMouseClickEvent.current;
+      const prevTimeStamp = prevEvent.timeStamp;
+      const prevClientX = prevEvent.clientX;
+      const prevClientY = prevEvent.clientY;
+
+      // Check if the current event is part of a double-click
+      if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
+        previousMouseClickEvent.current = undefined;
+        return;
+      }
+    }
     if (colDefRef.current) {
       apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
       logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
@@ -414,6 +429,7 @@ const useGridColumnResize = (apiRef, props) => {
     storeReferences(colDef, event.currentTarget, event.clientX);
     const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
+    previousMouseClickEvent.current = event.nativeEvent;
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
 
@@ -482,6 +498,16 @@ const useGridColumnResize = (apiRef, props) => {
         }
       }
       apiRef.current.updateColumns(newColumns);
+      newColumns.forEach((newColumn, index) => {
+        if (newColumn.width !== columns[index].width) {
+          const width = newColumn.width;
+          apiRef.current.publishEvent('columnWidthChange', {
+            element: apiRef.current.getColumnHeaderElement(newColumn.field),
+            colDef: newColumn,
+            width
+          });
+        }
+      });
     } finally {
       apiRef.current.unstable_setColumnVirtualization(true);
       isAutosizingRef.current = false;
@@ -515,5 +541,8 @@ const useGridColumnResize = (apiRef, props) => {
 };
 exports.useGridColumnResize = useGridColumnResize;
 function updateProperty(element, property, delta) {
+  if (!element) {
+    return;
+  }
   element.style[property] = `${parseInt(element.style[property], 10) + delta}px`;
 }

package/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -44,10 +44,9 @@ function findSkeletonRowsSection({
 }
 function isLazyLoadingDisabled({
   lazyLoadingFeatureFlag,
-  rowsLoadingMode,
-  gridDimensions
+  rowsLoadingMode
 }) {
-  if (!lazyLoadingFeatureFlag || !gridDimensions) {
+  if (!lazyLoadingFeatureFlag) {
     return true;
   }
   if (rowsLoadingMode !== 'server') {
@@ -63,7 +62,6 @@ function isLazyLoadingDisabled({
  * @requires useGridScroll (method
  */
 const useGridLazyLoader = (privateApiRef, props) => {
-  const visibleRows = (0, _internals.useGridVisibleRows)(privateApiRef, props);
   const sortModel = (0, _xDataGrid.useGridSelector)(privateApiRef, _xDataGrid.gridSortModelSelector);
   const filterModel = (0, _xDataGrid.useGridSelector)(privateApiRef, _xDataGrid.gridFilterModelSelector);
   const renderedRowsIntervalCache = React.useRef({
@@ -73,13 +71,12 @@ const useGridLazyLoader = (privateApiRef, props) => {
   const {
     lazyLoading
   } = props.experimentalFeatures ?? {};
+  const isDisabled = isLazyLoadingDisabled({
+    lazyLoadingFeatureFlag: lazyLoading,
+    rowsLoadingMode: props.rowsLoadingMode
+  });
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     const fetchRowsParams = {
@@ -91,10 +88,18 @@ const useGridLazyLoader = (privateApiRef, props) => {
     if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowIndex) {
       return;
     }
+    renderedRowsIntervalCache.current = {
+      firstRowToRender: params.firstRowIndex,
+      lastRowToRender: params.lastRowIndex
+    };
     if (sortModel.length === 0 && filterModel.items.length === 0) {
+      const currentVisibleRows = (0, _internals.getVisibleRows)(privateApiRef, {
+        pagination: props.pagination,
+        paginationMode: props.paginationMode
+      });
       const skeletonRowsSection = findSkeletonRowsSection({
         apiRef: privateApiRef,
-        visibleRows: visibleRows.rows,
+        visibleRows: currentVisibleRows.rows,
         range: {
           firstRowIndex: params.firstRowIndex,
           lastRowIndex: params.lastRowIndex
@@ -106,19 +111,10 @@ const useGridLazyLoader = (privateApiRef, props) => {
       fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
       fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
     }
-    renderedRowsIntervalCache.current = {
-      firstRowToRender: params.firstRowIndex,
-      lastRowToRender: params.lastRowIndex
-    };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, sortModel, filterModel, visibleRows.rows, lazyLoading]);
+  }, [privateApiRef, isDisabled, props.pagination, props.paginationMode, sortModel, filterModel]);
   const handleGridSortModelChange = React.useCallback(newSortModel => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
@@ -130,14 +126,9 @@ const useGridLazyLoader = (privateApiRef, props) => {
       filterModel
     };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, filterModel, lazyLoading]);
+  }, [privateApiRef, isDisabled, filterModel]);
   const handleGridFilterModelChange = React.useCallback(newFilterModel => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
@@ -149,7 +140,7 @@ const useGridLazyLoader = (privateApiRef, props) => {
       filterModel: newFilterModel
     };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, sortModel, lazyLoading]);
+  }, [privateApiRef, isDisabled, sortModel]);
   (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
   (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'sortModelChange', handleGridSortModelChange);
   (0, _xDataGrid.useGridApiEventHandler)(privateApiRef, 'filterModelChange', handleGridFilterModelChange);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.0.0-beta.4
+ * @mui/x-data-grid-pro v7.0.0-beta.5
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/DataGridPro/DataGridPro.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/components/GridPinnedRows.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-data-grid';
-import { gridPinnedRowsSelector, useGridPrivateApiContext } from '@mui/x-data-grid/internals';
+import { gridPinnedRowsSelector, gridRenderContextSelector, useGridPrivateApiContext } from '@mui/x-data-grid/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {
@@ -21,10 +21,18 @@ export function GridPinnedRows(_ref) {
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const classes = useUtilityClasses();
   const apiRef = useGridPrivateApiContext();
+  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const rows = pinnedRowsData[position];
   const pinnedRows = virtualScroller.getRows({
     position,
-    rows: pinnedRowsData[position]
+    rows,
+    renderContext: React.useMemo(() => ({
+      firstRowIndex: 0,
+      lastRowIndex: rows.length,
+      firstColumnIndex: renderContext.firstColumnIndex,
+      lastColumnIndex: renderContext.lastColumnIndex
+    }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex])
   });
   return /*#__PURE__*/_jsx("div", _extends({}, other, {
     className: clsx(classes.root, other.className, gridClasses[`pinnedRows--${position}`]),

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -175,6 +175,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const theme = useTheme();
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
+  const previousMouseClickEvent = React.useRef();
   const columnHeaderElementRef = React.useRef();
   const headerFilterElementRef = React.useRef();
   const groupHeaderElementsRef = React.useRef([]);
@@ -250,6 +251,20 @@ export const useGridColumnResize = (apiRef, props) => {
   const finishResize = nativeEvent => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
+
+    // Prevent double-clicks from being interpreted as two separate clicks
+    if (previousMouseClickEvent.current) {
+      const prevEvent = previousMouseClickEvent.current;
+      const prevTimeStamp = prevEvent.timeStamp;
+      const prevClientX = prevEvent.clientX;
+      const prevClientY = prevEvent.clientY;
+
+      // Check if the current event is part of a double-click
+      if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
+        previousMouseClickEvent.current = undefined;
+        return;
+      }
+    }
     if (colDefRef.current) {
       apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
       logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
@@ -404,6 +419,7 @@ export const useGridColumnResize = (apiRef, props) => {
     storeReferences(colDef, event.currentTarget, event.clientX);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
+    previousMouseClickEvent.current = event.nativeEvent;
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
 
@@ -472,6 +488,16 @@ export const useGridColumnResize = (apiRef, props) => {
         }
       }
       apiRef.current.updateColumns(newColumns);
+      newColumns.forEach((newColumn, index) => {
+        if (newColumn.width !== columns[index].width) {
+          const width = newColumn.width;
+          apiRef.current.publishEvent('columnWidthChange', {
+            element: apiRef.current.getColumnHeaderElement(newColumn.field),
+            colDef: newColumn,
+            width
+          });
+        }
+      });
     } finally {
       apiRef.current.unstable_setColumnVirtualization(true);
       isAutosizingRef.current = false;
@@ -504,5 +530,8 @@ export const useGridColumnResize = (apiRef, props) => {
   useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };
 function updateProperty(element, property, delta) {
+  if (!element) {
+    return;
+  }
   element.style[property] = `${parseInt(element.style[property], 10) + delta}px`;
 }

package/modern/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridApiEventHandler, useGridSelector, gridSortModelSelector, gridFilterModelSelector, gridRenderContextSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
-import { useGridVisibleRows } from '@mui/x-data-grid/internals';
+import { getVisibleRows } from '@mui/x-data-grid/internals';
 function findSkeletonRowsSection({
   apiRef,
   visibleRows,
@@ -36,10 +36,9 @@ function findSkeletonRowsSection({
 }
 function isLazyLoadingDisabled({
   lazyLoadingFeatureFlag,
-  rowsLoadingMode,
-  gridDimensions
+  rowsLoadingMode
 }) {
-  if (!lazyLoadingFeatureFlag || !gridDimensions) {
+  if (!lazyLoadingFeatureFlag) {
     return true;
   }
   if (rowsLoadingMode !== 'server') {
@@ -55,7 +54,6 @@ function isLazyLoadingDisabled({
  * @requires useGridScroll (method
  */
 export const useGridLazyLoader = (privateApiRef, props) => {
-  const visibleRows = useGridVisibleRows(privateApiRef, props);
   const sortModel = useGridSelector(privateApiRef, gridSortModelSelector);
   const filterModel = useGridSelector(privateApiRef, gridFilterModelSelector);
   const renderedRowsIntervalCache = React.useRef({
@@ -65,13 +63,12 @@ export const useGridLazyLoader = (privateApiRef, props) => {
   const {
     lazyLoading
   } = props.experimentalFeatures ?? {};
+  const isDisabled = isLazyLoadingDisabled({
+    lazyLoadingFeatureFlag: lazyLoading,
+    rowsLoadingMode: props.rowsLoadingMode
+  });
   const handleRenderedRowsIntervalChange = React.useCallback(params => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     const fetchRowsParams = {
@@ -83,10 +80,18 @@ export const useGridLazyLoader = (privateApiRef, props) => {
     if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowIndex && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowIndex) {
       return;
     }
+    renderedRowsIntervalCache.current = {
+      firstRowToRender: params.firstRowIndex,
+      lastRowToRender: params.lastRowIndex
+    };
     if (sortModel.length === 0 && filterModel.items.length === 0) {
+      const currentVisibleRows = getVisibleRows(privateApiRef, {
+        pagination: props.pagination,
+        paginationMode: props.paginationMode
+      });
       const skeletonRowsSection = findSkeletonRowsSection({
         apiRef: privateApiRef,
-        visibleRows: visibleRows.rows,
+        visibleRows: currentVisibleRows.rows,
         range: {
           firstRowIndex: params.firstRowIndex,
           lastRowIndex: params.lastRowIndex
@@ -98,19 +103,10 @@ export const useGridLazyLoader = (privateApiRef, props) => {
       fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
       fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
     }
-    renderedRowsIntervalCache.current = {
-      firstRowToRender: params.firstRowIndex,
-      lastRowToRender: params.lastRowIndex
-    };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, sortModel, filterModel, visibleRows.rows, lazyLoading]);
+  }, [privateApiRef, isDisabled, props.pagination, props.paginationMode, sortModel, filterModel]);
   const handleGridSortModelChange = React.useCallback(newSortModel => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
@@ -122,14 +118,9 @@ export const useGridLazyLoader = (privateApiRef, props) => {
       filterModel
     };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, filterModel, lazyLoading]);
+  }, [privateApiRef, isDisabled, filterModel]);
   const handleGridFilterModelChange = React.useCallback(newFilterModel => {
-    const dimensions = privateApiRef.current.getRootDimensions();
-    if (isLazyLoadingDisabled({
-      lazyLoadingFeatureFlag: lazyLoading,
-      rowsLoadingMode: props.rowsLoadingMode,
-      gridDimensions: dimensions
-    })) {
+    if (isDisabled) {
       return;
     }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
@@ -141,7 +132,7 @@ export const useGridLazyLoader = (privateApiRef, props) => {
       filterModel: newFilterModel
     };
     privateApiRef.current.publishEvent('fetchRows', fetchRowsParams);
-  }, [privateApiRef, props.rowsLoadingMode, sortModel, lazyLoading]);
+  }, [privateApiRef, isDisabled, sortModel]);
   useGridApiEventHandler(privateApiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
   useGridApiEventHandler(privateApiRef, 'sortModelChange', handleGridSortModelChange);
   useGridApiEventHandler(privateApiRef, 'filterModelChange', handleGridFilterModelChange);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.0.0-beta.4
+ * @mui/x-data-grid-pro v7.0.0-beta.5
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwODYyODQwMDAwMA==";
+  const releaseInfo = "MTcwOTM1NTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-beta.5",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -35,7 +35,7 @@
     "@babel/runtime": "^7.23.9",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
-    "@mui/x-data-grid": "7.0.0-beta.4",
+    "@mui/x-data-grid": "7.0.0-beta.5",
     "@mui/x-license": "7.0.0-beta.2",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.0",

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcwODYyODQwMDAwMA==";
+  const releaseInfo = "MTcwOTM1NTYwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat