@mui/x-data-grid 7.5.1 → 7.6.0

package/CHANGELOG.md

@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.6.0
+
+_May 30, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow to define and customize the indentation of nested items in the Tree View
+- ✨ Allow charts highlights to be controlled
+- 🌍 Improve Persian (fa-IR) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.0`
+
+- [DataGrid] Avoid re-rendering all cells on column change (#12980) @romgrk
+- [DataGrid] Export `GridColumnHeadersProps` (#13229) @cherniavskii
+- [DataGrid] Fix header filters' issue with custom filters (#13255) @MBilalShafi
+- [DataGrid] Remove dead logic to support Safari < 13 (#13249) @oliviertassinari
+- [l10n] Improve Persian (fa-IR) locale (#12994) @amiryxe
+
+#### `@mui/x-data-grid-pro@7.6.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.6.0`.
+
+#### `@mui/x-data-grid-premium@7.6.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.6.0`, plus:
+
+- [DataGridPremium] Fix excel export causing column with wrong width (#13191) @romgrk
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.0`
+
+- [pickers] Fix `DateBuilderReturnType` when the date is `undefined` (#13244) @alexey-kozlenkov
+
+#### `@mui/x-date-pickers-pro@7.6.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.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.0`
+
+- [charts] Allow charts highlights to be controlled (#12828) @JCQuintas
+- [charts] Refactor axis band scaleType check (#13295) @JCQuintas
+- [charts] Refactor checkScaleErrors to improve readability and simplify axis message logic (#13305) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.6.0`
+
+- [TreeView] Add JSDoc to every instance method (#13219) @flaviendelangle
+- [TreeView] Allow to customize the indentation of nested items (#13225) @flaviendelangle
+- [TreeView] Allow to define indentation at the item level (#13126) @flaviendelangle
+
+### Docs
+
+- [docs] Add Bulk editing demo for the Community plan (#12800) @cherniavskii
+- [docs] Add conditional label formatting on tooltip page and link to label page (#13235) @JCQuintas
+- [docs] Add information about key combinations on a11y sections (#13234) @arthurbalduini
+- [docs] Cleanup of the Tree View demos (#13237) @flaviendelangle
+- [docs] Document how to customize a subsection of a line chart (#13210) @alexfauquette
+- [docs] Fix Pickers FAQ callout (#13238) @LukasTy
+- [docs] Fix Vale errors @oliviertassinari
+- [docs] Fix a small typo in property comment (#13245) @Janpot
+- [docs] Improve the Data Grid FAQ page (#13258) @MBilalShafi
+- [docs] Removes unused lines in TreeItem2 styling (#13264) @arthurbalduini
+- [docs] Small improvements on accessibility data grid doc (#13233) @arthurbalduini
+- [docs] Update Pickers demo configurations (#13303) @LukasTy
+
+### Core
+
+- [core] Add comment on why logic to sync column header (#13248) @oliviertassinari
+- [core] Fix `l10n` script execution with arguments (#13297) @LukasTy
+- [core] Prevent "Add reviewers" workflow from triggering since it doesn't work (#13236) @JCQuintas
+- [docs-infra] Fix `@mui/material` version used in sandboxes (#13260) @LukasTy
+- [test] Use `describeTreeView` for keyboard navigation tests on disabled items (#13184) @flaviendelangle
+- [test] Use `describeTreeView` for remaining items tests (#13262) @flaviendelangle
+- [test] Use test-utils from npm (#12880) @michaldudak
+- [typescript] Remove duplicate `DateRangePosition` type in favor of `RangePosition` (#13288) @LukasTy
+
 ## v7.5.1
 
 _May 23, 2024_
@@ -339,7 +425,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 ### Core
 
 - [core] Fix `l10n` GH workflow (#12895) @LukasTy
-- [core] Match Base UI and Toolpad @oliviertassinari
+- [core] Match Base UI and Toolpad @oliviertassinari
 - [core] Remove redundant `setupFiles` entries in `package.json` (#12899) @LukasTy
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle

package/DataGrid/DataGrid.js

@@ -62,7 +62,7 @@ DataGridRaw.propTypes = {
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
    */
   autoHeight: PropTypes.bool,

package/components/cell/GridCell.js

@@ -75,7 +75,7 @@ let warnedOnce = false;
 
 // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
 
-const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const {
       column,
       rowId,

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -12,7 +12,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
-      columnMenuOpen,
       colIndex,
       height,
       isResizing,
@@ -38,17 +37,11 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const headerCellRef = React.useRef(null);
-  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
   const handleRef = useForkRef(headerCellRef, ref);
   let ariaSort = 'none';
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  React.useEffect(() => {
-    if (!showColumnMenuIcon) {
-      setShowColumnMenuIcon(columnMenuOpen);
-    }
-  }, [showColumnMenuIcon, columnMenuOpen]);
   React.useLayoutEffect(() => {
     const columnMenuState = apiRef.current.state.columnMenu;
     if (hasFocus && !columnMenuState.open) {

package/hooks/features/columnResize/useGridColumnResize.js

@@ -13,27 +13,6 @@ import { clamp } from '../../../utils/utils';
 import { useTimeout } from '../../utils/useTimeout';
 import { GridPinnedColumnPosition } from '../columns/gridColumnsInterfaces';
 import { gridColumnsStateSelector } from '../columns';
-// TODO: remove support for Safari < 13.
-// https://caniuse.com/#search=touch-action
-//
-// Safari, on iOS, supports touch action since v13.
-// Over 80% of the iOS phones are compatible
-// in August 2020.
-// Utilizing the CSS.supports method to check if touch-action is supported.
-// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
-// is supported on both Edge@12 and IE if CSS.supports is not available that means that
-// touch-action will be supported
-let cachedSupportsTouchActionNone = false;
-function doesSupportTouchActionNone() {
-  if (cachedSupportsTouchActionNone === undefined) {
-    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
-      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
-    } else {
-      cachedSupportsTouchActionNone = true;
-    }
-  }
-  return cachedSupportsTouchActionNone;
-}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -294,6 +273,10 @@ export const useGridColumnResize = (apiRef, props) => {
     if (refs.colDef) {
       apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width);
       logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
+
+      // Since during resizing we update the columns width outside of React, React is unable to
+      // reapply the right style properties. We need to sync the state manually.
+      // So we reapply the same logic as in https://github.com/mui/mui-x/blob/0511bf65543ca05d2602a5a3e0a6156f2fc8e759/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L405
       const columnsState = gridColumnsStateSelector(apiRef.current.state);
       refs.groupHeaderElements.forEach(element => {
         const fields = getFieldsFromGroupHeaderElem(element);
@@ -387,10 +370,6 @@ export const useGridColumnResize = (apiRef, props) => {
     if (!cellSeparator) {
       return;
     }
-    // If touch-action: none; is not supported we need to prevent the scroll manually.
-    if (!doesSupportTouchActionNone()) {
-      event.preventDefault();
-    }
     const touch = event.changedTouches[0];
     if (touch != null) {
       // A number that uniquely identifies the current finger in the touch session.
@@ -562,7 +541,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }
   });
   useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
-    passive: doesSupportTouchActionNone()
+    passive: true
   });
   useGridApiMethod(apiRef, {
     autosizeColumns

package/hooks/features/columns/gridColumnsUtils.js

@@ -117,24 +117,29 @@ export const hydrateColumnsWidth = (rawState, dimensions) => {
   const flexColumns = [];
 
   // For the non-flex columns, compute their width
-  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+  // For the flex columns, compute their minimum width and how much width must be allocated during the flex allocation
   rawState.orderedFields.forEach(columnField => {
-    const newColumn = _extends({}, rawState.lookup[columnField]);
-    if (rawState.columnVisibilityModel[columnField] === false) {
-      newColumn.computedWidth = 0;
-    } else {
-      let computedWidth;
-      if (newColumn.flex && newColumn.flex > 0) {
-        totalFlexUnits += newColumn.flex;
-        computedWidth = 0;
-        flexColumns.push(newColumn);
+    let column = rawState.lookup[columnField];
+    let computedWidth = 0;
+    let isFlex = false;
+    if (rawState.columnVisibilityModel[columnField] !== false) {
+      if (column.flex && column.flex > 0) {
+        totalFlexUnits += column.flex;
+        isFlex = true;
       } else {
-        computedWidth = clamp(newColumn.width || GRID_STRING_COL_DEF.width, newColumn.minWidth || GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || GRID_STRING_COL_DEF.maxWidth);
+        computedWidth = clamp(column.width || GRID_STRING_COL_DEF.width, column.minWidth || GRID_STRING_COL_DEF.minWidth, column.maxWidth || GRID_STRING_COL_DEF.maxWidth);
       }
       widthAllocatedBeforeFlex += computedWidth;
-      newColumn.computedWidth = computedWidth;
     }
-    columnsLookup[columnField] = newColumn;
+    if (column.computedWidth !== computedWidth) {
+      column = _extends({}, column, {
+        computedWidth
+      });
+    }
+    if (isFlex) {
+      flexColumns.push(column);
+    }
+    columnsLookup[columnField] = column;
   });
   const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
   const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);

package/hooks/features/columns/useGridColumnSpanning.js

@@ -10,6 +10,9 @@ export const useGridColumnSpanning = apiRef => {
   const getCellColSpanInfo = (rowId, columnIndex) => {
     return lookup.current[rowId]?.[columnIndex];
   };
+  const resetColSpan = () => {
+    lookup.current = {};
+  };
 
   // Calculate `colSpan` for each cell in the row
   const calculateColSpan = React.useCallback(({
@@ -37,15 +40,12 @@ export const useGridColumnSpanning = apiRef => {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
   const columnSpanningPrivateApi = {
+    resetColSpan,
     calculateColSpan
   };
   useGridApiMethod(apiRef, columnSpanningPublicApi, 'public');
   useGridApiMethod(apiRef, columnSpanningPrivateApi, 'private');
-  const handleColumnReorderChange = React.useCallback(() => {
-    // `colSpan` needs to be recalculated after column reordering
-    lookup.current = {};
-  }, []);
-  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', resetColSpan);
 };
 function calculateCellColSpan(params) {
   const {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -42,7 +42,14 @@ const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, ho
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false;
+let isJSDOM = false;
+try {
+  if (typeof window !== 'undefined') {
+    isJSDOM = /jsdom/.test(window.navigator.userAgent);
+  }
+} catch (_) {
+  /* ignore */
+}
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();

package/index.d.ts

@@ -15,6 +15,7 @@ export type { DataGridProps, GridExperimentalFeatures } from './models/props/Dat
 export type { GridToolbarExportProps } from './components/toolbar/GridToolbarExport';
 export type { GridExportFormat, GridExportExtension } from './models/gridExport';
 export { GridColumnHeaders } from './components/GridColumnHeaders';
+export type { GridColumnHeadersProps } from './components/GridColumnHeaders';
 /**
  * Reexportable components.
  */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.5.1
+ * @mui/x-data-grid v7.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -17,7 +17,6 @@ export * from './context';
 export * from './colDef';
 export * from './utils';
 export { GridColumnHeaders } from './components/GridColumnHeaders';
-
 /**
  * Reexportable components.
  */

package/locales/faIR.js

@@ -3,7 +3,7 @@ import { getGridLocalization } from '../utils/getGridLocalization';
 const faIRGrid = {
   // Root
   noRowsLabel: 'بدون سطر',
-  noResultsOverlayLabel: 'نتیجه ای پیدا نشد.',
+  noResultsOverlayLabel: 'نتیجه‌ای پیدا نشد.',
   // Density selector toolbar button text
   toolbarDensity: 'تراکم',
   toolbarDensityLabel: 'تراکم',
@@ -97,12 +97,12 @@ const faIRGrid = {
   columnMenuFilter: 'فیلتر',
   columnMenuHideColumn: 'مخفی',
   columnMenuUnsort: 'نامرتب‌کردن',
-  columnMenuSortAsc: 'مرتب‌کردن صعودی',
-  columnMenuSortDesc: 'مرتب‌کردن نزولی',
+  columnMenuSortAsc: 'مرتب‌سازی صعودی',
+  columnMenuSortDesc: 'مرتب‌سازی نزولی',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} فیلتر‌های فعال` : `${count} فیلتر فعال`,
   columnHeaderFiltersLabel: 'نمایش فیلترها',
-  columnHeaderSortIconLabel: 'مرتب‌کردن',
+  columnHeaderSortIconLabel: 'مرتب‌سازی',
   // Rows selected footer text
   footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} سطرهای انتخاب شده` : `${count.toLocaleString()} سطر انتخاب شده`,
   // Total row amount footer text

package/locales/fiFI.js

@@ -30,11 +30,10 @@ const fiFIGrid = {
   toolbarExportPrint: 'Tulosta',
   toolbarExportExcel: 'Lataa Excel-muodossa',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Hae',
+  columnsManagementNoColumns: 'Ei sarakkeita näytettäväksi',
+  columnsManagementShowHideAllText: 'Näytä/Piilota kaikki',
+  columnsManagementReset: 'Palauta',
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelRemoveAll: 'Poista kaikki',

package/models/api/gridColumnSpanning.d.ts

@@ -15,6 +15,8 @@ export interface GridColumnSpanningApi {
     unstable_getCellColSpanInfo: (rowId: GridRowId, columnIndex: GridColumnIndex) => GridCellColSpanInfo | undefined;
 }
 export interface GridColumnSpanningPrivateApi {
+    /** Reset the colspan cache */
+    resetColSpan: () => void;
     /**
      * Calculate column spanning for each cell in the row
      * @param {Object} options The options to apply on the calculation.

package/models/gridSlotsComponent.d.ts

@@ -95,7 +95,7 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
     columnMenu: React.JSXElementConstructor<GridSlotProps['columnMenu']>;
     /**
      * Component responsible for rendering the column headers.
-     * @default DataGridColumnHeaders
+     * @default GridColumnHeaders
      */
     columnHeaders: React.JSXElementConstructor<GridSlotProps['columnHeaders']>;
     /**

package/models/props/DataGridProps.d.ts

@@ -72,7 +72,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
  */
 export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = any> {
     /**
-     * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+     * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
      * @default false
      */
     autoHeight: boolean;

package/modern/DataGrid/DataGrid.js

@@ -62,7 +62,7 @@ DataGridRaw.propTypes = {
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
    */
   autoHeight: PropTypes.bool,

package/modern/components/cell/GridCell.js

@@ -75,7 +75,7 @@ let warnedOnce = false;
 
 // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
 
-const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const {
       column,
       rowId,

package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -12,7 +12,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
-      columnMenuOpen,
       colIndex,
       height,
       isResizing,
@@ -38,17 +37,11 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const headerCellRef = React.useRef(null);
-  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
   const handleRef = useForkRef(headerCellRef, ref);
   let ariaSort = 'none';
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  React.useEffect(() => {
-    if (!showColumnMenuIcon) {
-      setShowColumnMenuIcon(columnMenuOpen);
-    }
-  }, [showColumnMenuIcon, columnMenuOpen]);
   React.useLayoutEffect(() => {
     const columnMenuState = apiRef.current.state.columnMenu;
     if (hasFocus && !columnMenuState.open) {

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

@@ -13,27 +13,6 @@ import { clamp } from '../../../utils/utils';
 import { useTimeout } from '../../utils/useTimeout';
 import { GridPinnedColumnPosition } from '../columns/gridColumnsInterfaces';
 import { gridColumnsStateSelector } from '../columns';
-// TODO: remove support for Safari < 13.
-// https://caniuse.com/#search=touch-action
-//
-// Safari, on iOS, supports touch action since v13.
-// Over 80% of the iOS phones are compatible
-// in August 2020.
-// Utilizing the CSS.supports method to check if touch-action is supported.
-// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
-// is supported on both Edge@12 and IE if CSS.supports is not available that means that
-// touch-action will be supported
-let cachedSupportsTouchActionNone = false;
-function doesSupportTouchActionNone() {
-  if (cachedSupportsTouchActionNone === undefined) {
-    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
-      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
-    } else {
-      cachedSupportsTouchActionNone = true;
-    }
-  }
-  return cachedSupportsTouchActionNone;
-}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -294,6 +273,10 @@ export const useGridColumnResize = (apiRef, props) => {
     if (refs.colDef) {
       apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width);
       logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
+
+      // Since during resizing we update the columns width outside of React, React is unable to
+      // reapply the right style properties. We need to sync the state manually.
+      // So we reapply the same logic as in https://github.com/mui/mui-x/blob/0511bf65543ca05d2602a5a3e0a6156f2fc8e759/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L405
       const columnsState = gridColumnsStateSelector(apiRef.current.state);
       refs.groupHeaderElements.forEach(element => {
         const fields = getFieldsFromGroupHeaderElem(element);
@@ -387,10 +370,6 @@ export const useGridColumnResize = (apiRef, props) => {
     if (!cellSeparator) {
       return;
     }
-    // If touch-action: none; is not supported we need to prevent the scroll manually.
-    if (!doesSupportTouchActionNone()) {
-      event.preventDefault();
-    }
     const touch = event.changedTouches[0];
     if (touch != null) {
       // A number that uniquely identifies the current finger in the touch session.
@@ -562,7 +541,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }
   });
   useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
-    passive: doesSupportTouchActionNone()
+    passive: true
   });
   useGridApiMethod(apiRef, {
     autosizeColumns

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -117,24 +117,29 @@ export const hydrateColumnsWidth = (rawState, dimensions) => {
   const flexColumns = [];
 
   // For the non-flex columns, compute their width
-  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+  // For the flex columns, compute their minimum width and how much width must be allocated during the flex allocation
   rawState.orderedFields.forEach(columnField => {
-    const newColumn = _extends({}, rawState.lookup[columnField]);
-    if (rawState.columnVisibilityModel[columnField] === false) {
-      newColumn.computedWidth = 0;
-    } else {
-      let computedWidth;
-      if (newColumn.flex && newColumn.flex > 0) {
-        totalFlexUnits += newColumn.flex;
-        computedWidth = 0;
-        flexColumns.push(newColumn);
+    let column = rawState.lookup[columnField];
+    let computedWidth = 0;
+    let isFlex = false;
+    if (rawState.columnVisibilityModel[columnField] !== false) {
+      if (column.flex && column.flex > 0) {
+        totalFlexUnits += column.flex;
+        isFlex = true;
       } else {
-        computedWidth = clamp(newColumn.width || GRID_STRING_COL_DEF.width, newColumn.minWidth || GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || GRID_STRING_COL_DEF.maxWidth);
+        computedWidth = clamp(column.width || GRID_STRING_COL_DEF.width, column.minWidth || GRID_STRING_COL_DEF.minWidth, column.maxWidth || GRID_STRING_COL_DEF.maxWidth);
       }
       widthAllocatedBeforeFlex += computedWidth;
-      newColumn.computedWidth = computedWidth;
     }
-    columnsLookup[columnField] = newColumn;
+    if (column.computedWidth !== computedWidth) {
+      column = _extends({}, column, {
+        computedWidth
+      });
+    }
+    if (isFlex) {
+      flexColumns.push(column);
+    }
+    columnsLookup[columnField] = column;
   });
   const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
   const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -10,6 +10,9 @@ export const useGridColumnSpanning = apiRef => {
   const getCellColSpanInfo = (rowId, columnIndex) => {
     return lookup.current[rowId]?.[columnIndex];
   };
+  const resetColSpan = () => {
+    lookup.current = {};
+  };
 
   // Calculate `colSpan` for each cell in the row
   const calculateColSpan = React.useCallback(({
@@ -37,15 +40,12 @@ export const useGridColumnSpanning = apiRef => {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
   const columnSpanningPrivateApi = {
+    resetColSpan,
     calculateColSpan
   };
   useGridApiMethod(apiRef, columnSpanningPublicApi, 'public');
   useGridApiMethod(apiRef, columnSpanningPrivateApi, 'private');
-  const handleColumnReorderChange = React.useCallback(() => {
-    // `colSpan` needs to be recalculated after column reordering
-    lookup.current = {};
-  }, []);
-  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', resetColSpan);
 };
 function calculateCellColSpan(params) {
   const {

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -42,7 +42,14 @@ const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, ho
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false;
+let isJSDOM = false;
+try {
+  if (typeof window !== 'undefined') {
+    isJSDOM = /jsdom/.test(window.navigator.userAgent);
+  }
+} catch (_) {
+  /* ignore */
+}
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.5.1
+ * @mui/x-data-grid v7.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -17,7 +17,6 @@ export * from './context';
 export * from './colDef';
 export * from './utils';
 export { GridColumnHeaders } from './components/GridColumnHeaders';
-
 /**
  * Reexportable components.
  */

package/modern/locales/faIR.js

@@ -3,7 +3,7 @@ import { getGridLocalization } from '../utils/getGridLocalization';
 const faIRGrid = {
   // Root
   noRowsLabel: 'بدون سطر',
-  noResultsOverlayLabel: 'نتیجه ای پیدا نشد.',
+  noResultsOverlayLabel: 'نتیجه‌ای پیدا نشد.',
   // Density selector toolbar button text
   toolbarDensity: 'تراکم',
   toolbarDensityLabel: 'تراکم',
@@ -97,12 +97,12 @@ const faIRGrid = {
   columnMenuFilter: 'فیلتر',
   columnMenuHideColumn: 'مخفی',
   columnMenuUnsort: 'نامرتب‌کردن',
-  columnMenuSortAsc: 'مرتب‌کردن صعودی',
-  columnMenuSortDesc: 'مرتب‌کردن نزولی',
+  columnMenuSortAsc: 'مرتب‌سازی صعودی',
+  columnMenuSortDesc: 'مرتب‌سازی نزولی',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} فیلتر‌های فعال` : `${count} فیلتر فعال`,
   columnHeaderFiltersLabel: 'نمایش فیلترها',
-  columnHeaderSortIconLabel: 'مرتب‌کردن',
+  columnHeaderSortIconLabel: 'مرتب‌سازی',
   // Rows selected footer text
   footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} سطرهای انتخاب شده` : `${count.toLocaleString()} سطر انتخاب شده`,
   // Total row amount footer text

package/modern/locales/fiFI.js

@@ -30,11 +30,10 @@ const fiFIGrid = {
   toolbarExportPrint: 'Tulosta',
   toolbarExportExcel: 'Lataa Excel-muodossa',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Hae',
+  columnsManagementNoColumns: 'Ei sarakkeita näytettäväksi',
+  columnsManagementShowHideAllText: 'Näytä/Piilota kaikki',
+  columnsManagementReset: 'Palauta',
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelRemoveAll: 'Poista kaikki',

package/modern/utils/domUtils.js

@@ -54,8 +54,7 @@ export function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 export function getFieldsFromGroupHeaderElem(colCellEl) {
-  const fieldsString = colCellEl.getAttribute('data-fields');
-  return fieldsString?.startsWith('|-') ? fieldsString.slice(2, -2).split('-|-') : [];
+  return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 export function findGroupHeaderElementsFromField(elem, field) {
   return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);

package/node/DataGrid/DataGrid.js

@@ -70,7 +70,7 @@ DataGridRaw.propTypes = {
    */
   'aria-labelledby': _propTypes.default.string,
   /**
-   * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
    */
   autoHeight: _propTypes.default.bool,

package/node/components/cell/GridCell.js

@@ -84,7 +84,7 @@ let warnedOnce = false;
 
 // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
 
-const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const {
       column,
       rowId,

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -21,7 +21,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
-      columnMenuOpen,
       colIndex,
       height,
       isResizing,
@@ -47,17 +46,11 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const headerCellRef = React.useRef(null);
-  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
   const handleRef = (0, _utils.unstable_useForkRef)(headerCellRef, ref);
   let ariaSort = 'none';
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  React.useEffect(() => {
-    if (!showColumnMenuIcon) {
-      setShowColumnMenuIcon(columnMenuOpen);
-    }
-  }, [showColumnMenuIcon, columnMenuOpen]);
   React.useLayoutEffect(() => {
     const columnMenuState = apiRef.current.state.columnMenu;
     if (hasFocus && !columnMenuState.open) {

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

@@ -22,27 +22,6 @@ var _gridColumnsInterfaces = require("../columns/gridColumnsInterfaces");
 var _columns = require("../columns");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// TODO: remove support for Safari < 13.
-// https://caniuse.com/#search=touch-action
-//
-// Safari, on iOS, supports touch action since v13.
-// Over 80% of the iOS phones are compatible
-// in August 2020.
-// Utilizing the CSS.supports method to check if touch-action is supported.
-// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
-// is supported on both Edge@12 and IE if CSS.supports is not available that means that
-// touch-action will be supported
-let cachedSupportsTouchActionNone = false;
-function doesSupportTouchActionNone() {
-  if (cachedSupportsTouchActionNone === undefined) {
-    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
-      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
-    } else {
-      cachedSupportsTouchActionNone = true;
-    }
-  }
-  return cachedSupportsTouchActionNone;
-}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -304,6 +283,10 @@ const useGridColumnResize = (apiRef, props) => {
     if (refs.colDef) {
       apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width);
       logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
+
+      // Since during resizing we update the columns width outside of React, React is unable to
+      // reapply the right style properties. We need to sync the state manually.
+      // So we reapply the same logic as in https://github.com/mui/mui-x/blob/0511bf65543ca05d2602a5a3e0a6156f2fc8e759/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L405
       const columnsState = (0, _columns.gridColumnsStateSelector)(apiRef.current.state);
       refs.groupHeaderElements.forEach(element => {
         const fields = (0, _domUtils.getFieldsFromGroupHeaderElem)(element);
@@ -397,10 +380,6 @@ const useGridColumnResize = (apiRef, props) => {
     if (!cellSeparator) {
       return;
     }
-    // If touch-action: none; is not supported we need to prevent the scroll manually.
-    if (!doesSupportTouchActionNone()) {
-      event.preventDefault();
-    }
     const touch = event.changedTouches[0];
     if (touch != null) {
       // A number that uniquely identifies the current finger in the touch session.
@@ -572,7 +551,7 @@ const useGridColumnResize = (apiRef, props) => {
     }
   });
   (0, _utils2.useGridNativeEventListener)(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
-    passive: doesSupportTouchActionNone()
+    passive: true
   });
   (0, _utils2.useGridApiMethod)(apiRef, {
     autosizeColumns

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -129,24 +129,29 @@ const hydrateColumnsWidth = (rawState, dimensions) => {
   const flexColumns = [];
 
   // For the non-flex columns, compute their width
-  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+  // For the flex columns, compute their minimum width and how much width must be allocated during the flex allocation
   rawState.orderedFields.forEach(columnField => {
-    const newColumn = (0, _extends2.default)({}, rawState.lookup[columnField]);
-    if (rawState.columnVisibilityModel[columnField] === false) {
-      newColumn.computedWidth = 0;
-    } else {
-      let computedWidth;
-      if (newColumn.flex && newColumn.flex > 0) {
-        totalFlexUnits += newColumn.flex;
-        computedWidth = 0;
-        flexColumns.push(newColumn);
+    let column = rawState.lookup[columnField];
+    let computedWidth = 0;
+    let isFlex = false;
+    if (rawState.columnVisibilityModel[columnField] !== false) {
+      if (column.flex && column.flex > 0) {
+        totalFlexUnits += column.flex;
+        isFlex = true;
       } else {
-        computedWidth = (0, _utils.clamp)(newColumn.width || _colDef.GRID_STRING_COL_DEF.width, newColumn.minWidth || _colDef.GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || _colDef.GRID_STRING_COL_DEF.maxWidth);
+        computedWidth = (0, _utils.clamp)(column.width || _colDef.GRID_STRING_COL_DEF.width, column.minWidth || _colDef.GRID_STRING_COL_DEF.minWidth, column.maxWidth || _colDef.GRID_STRING_COL_DEF.maxWidth);
       }
       widthAllocatedBeforeFlex += computedWidth;
-      newColumn.computedWidth = computedWidth;
     }
-    columnsLookup[columnField] = newColumn;
+    if (column.computedWidth !== computedWidth) {
+      column = (0, _extends2.default)({}, column, {
+        computedWidth
+      });
+    }
+    if (isFlex) {
+      flexColumns.push(column);
+    }
+    columnsLookup[columnField] = column;
   });
   const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
   const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);

package/node/hooks/features/columns/useGridColumnSpanning.js

@@ -18,6 +18,9 @@ const useGridColumnSpanning = apiRef => {
   const getCellColSpanInfo = (rowId, columnIndex) => {
     return lookup.current[rowId]?.[columnIndex];
   };
+  const resetColSpan = () => {
+    lookup.current = {};
+  };
 
   // Calculate `colSpan` for each cell in the row
   const calculateColSpan = React.useCallback(({
@@ -45,15 +48,12 @@ const useGridColumnSpanning = apiRef => {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
   const columnSpanningPrivateApi = {
+    resetColSpan,
     calculateColSpan
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPublicApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPrivateApi, 'private');
-  const handleColumnReorderChange = React.useCallback(() => {
-    // `colSpan` needs to be recalculated after column reordering
-    lookup.current = {};
-  }, []);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', resetColSpan);
 };
 exports.useGridColumnSpanning = useGridColumnSpanning;
 function calculateCellColSpan(params) {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -54,7 +54,14 @@ const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, ho
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false;
+let isJSDOM = false;
+try {
+  if (typeof window !== 'undefined') {
+    isJSDOM = /jsdom/.test(window.navigator.userAgent);
+  }
+} catch (_) {
+  /* ignore */
+}
 const useGridVirtualScroller = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/node/index.js

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

package/node/locales/faIR.js

@@ -9,7 +9,7 @@ var _getGridLocalization = require("../utils/getGridLocalization");
 const faIRGrid = {
   // Root
   noRowsLabel: 'بدون سطر',
-  noResultsOverlayLabel: 'نتیجه ای پیدا نشد.',
+  noResultsOverlayLabel: 'نتیجه‌ای پیدا نشد.',
   // Density selector toolbar button text
   toolbarDensity: 'تراکم',
   toolbarDensityLabel: 'تراکم',
@@ -103,12 +103,12 @@ const faIRGrid = {
   columnMenuFilter: 'فیلتر',
   columnMenuHideColumn: 'مخفی',
   columnMenuUnsort: 'نامرتب‌کردن',
-  columnMenuSortAsc: 'مرتب‌کردن صعودی',
-  columnMenuSortDesc: 'مرتب‌کردن نزولی',
+  columnMenuSortAsc: 'مرتب‌سازی صعودی',
+  columnMenuSortDesc: 'مرتب‌سازی نزولی',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} فیلتر‌های فعال` : `${count} فیلتر فعال`,
   columnHeaderFiltersLabel: 'نمایش فیلترها',
-  columnHeaderSortIconLabel: 'مرتب‌کردن',
+  columnHeaderSortIconLabel: 'مرتب‌سازی',
   // Rows selected footer text
   footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} سطرهای انتخاب شده` : `${count.toLocaleString()} سطر انتخاب شده`,
   // Total row amount footer text

package/node/locales/fiFI.js

@@ -36,11 +36,10 @@ const fiFIGrid = {
   toolbarExportPrint: 'Tulosta',
   toolbarExportExcel: 'Lataa Excel-muodossa',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Hae',
+  columnsManagementNoColumns: 'Ei sarakkeita näytettäväksi',
+  columnsManagementShowHideAllText: 'Näytä/Piilota kaikki',
+  columnsManagementReset: 'Palauta',
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelRemoveAll: 'Poista kaikki',

package/node/utils/domUtils.js

@@ -79,8 +79,7 @@ function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 function getFieldsFromGroupHeaderElem(colCellEl) {
-  const fieldsString = colCellEl.getAttribute('data-fields');
-  return fieldsString?.startsWith('|-') ? fieldsString.slice(2, -2).split('-|-') : [];
+  return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 function findGroupHeaderElementsFromField(elem, field) {
   return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.5.1",
+  "version": "7.6.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,8 +37,9 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@mui/system": "^5.15.14",
+    "@babel/runtime": "^7.24.6",
+    "@mui/internal-test-utils": "1.0.0-dev.20240529-082515-213b5e33ab",
+    "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",

package/utils/domUtils.js

@@ -54,8 +54,7 @@ export function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 export function getFieldsFromGroupHeaderElem(colCellEl) {
-  const fieldsString = colCellEl.getAttribute('data-fields');
-  return fieldsString?.startsWith('|-') ? fieldsString.slice(2, -2).split('-|-') : [];
+  return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 export function findGroupHeaderElementsFromField(elem, field) {
   return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);