@mui/x-data-grid 7.3.2 → 7.5.0

package/CHANGELOG.md

@@ -3,6 +3,144 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.5.0
+
+_May 17, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add support for checkbox selection on the Tree View components
+- 🌍 Improve Norwegian (nb-NO) and Spanish (es-ES) locales on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.5.0`
+
+- [DataGrid] Fix `rowModesModel` controlled prop (#13056) @Janpot
+- [DataGrid] Reduce bundle size with error messages (#12992) @oliviertassinari
+- [l10n] Improve Norwegian (nb-NO) locale (#13106) @oliverlaidma
+- [l10n] Improve Spanish (es-ES) locale (#13133) @Jucabel
+
+#### `@mui/x-data-grid-pro@7.5.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.5.0`.
+
+#### `@mui/x-data-grid-premium@7.5.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.5.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.5.0`
+
+- [fields] Allow empty `textField` slot placeholder value (#13148) @arthurbalduini
+- [pickers] Fix `AdapterMomentJalaali` regression (#13144) @LukasTy
+- [pickers] Fix field focusing when switching to view without a renderer (#13112) @LukasTy
+- [pickers] Reuse `AdapterDateFnsBase` in Jalali adapters (#13075) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.5.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.5.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.5.0`
+
+- [charts] Tooltip with `trigger=axis` now follow touch on mobile (#13043) @wzdorowa
+- [charts] Allow `series.label` property to receive a function with the "location" it is going to be displayed on (#12830) @JCQuintas
+- [charts] Improve TypeScript performance (#13137) @alexfauquette
+- [charts] Fix area order when overlapping (#13121) @alexfauquette
+- [charts] Improve `useSlotProps` types (#13141) @alexfauquette
+- [charts] Fix using the theme's font in the Overlay (#13107) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.5.0`
+
+- [TreeView] Add support for checkbox selection (#11452) @flaviendelangle
+- [TreeView] Remove unused code (#12917) @flaviendelangle
+
+### Docs
+
+- [docs] Document missing Charts API's (#12875) @alexfauquette
+
+### Core
+
+- [core] Avoid root level `@mui/x-date-pickers` imports (#13120) @LukasTy
+- [core] Refactor ESLint config to disallow root level imports (#13130) @LukasTy
+- [core] Simplify Danger's config (#13062) @oliviertassinari
+- [core] Shift aliasing from babel to webpack (#13051) @Janpot
+- [core] Reuse the `SectionTitle` component in the doc (#13139) @alexfauquette
+
+## 7.4.0
+
+_May 10, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add optional `id` attribute on shortcut items of the Date and Time Pickers
+- 🎁 Add support for `date-fns-jalali` v3 in the Date and Time Pickers
+- 🚀 Support rounded corners on `BarChart`
+- 🌍 Add accessibility page to TreeView docs
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.4.0`
+
+- [DataGrid] Fix error when focus moves from column header to `svg` element (#13028) @oukunan
+- [DataGrid] Fix error on column groups change (#12965) @romgrk
+
+#### `@mui/x-data-grid-pro@7.4.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.4.0`.
+
+#### `@mui/x-data-grid-premium@7.4.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.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.4.0`
+
+- [fields] Fix regression preventing form submit on "Enter" click (#13065) @LukasTy
+- [pickers] Add `AdapterDateFnsJalaliV3` adapter (#12891) @smmoosavi
+- [pickers] Add optional `id` attribute on shortcut items (#12976) @noraleonte
+
+#### `@mui/x-date-pickers-pro@7.4.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.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.4.0`
+
+- [charts] Add `ChartsGrid` to `themeAugmentation` (#13026) @noraleonte
+- [charts] Support rounded corners on `BarChart` (#12834) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.4.0`
+
+- [TreeView] Fix props propagation and theme entry in `TreeItem2` (#12889) @flaviendelangle
+
+### Docs
+
+- [docs] Add accessibility page to TreeView docs (#12845) @noraleonte
+- [docs] Fix Charts styling typos (#13061) @oliviertassinari
+- [docs] Fix legal link to EULA free trial (#13013) @oliviertassinari
+- [docs] Update interface name in pinned columns docs (#13070) @cherniavskii
+
+### Core
+
+- [core] Improve release process docs (#12977) @JCQuintas
+- [core] Prepare React 19 (#12991) @oliviertassinari
+- [docs-infra] Fix Netlify PR preview path (#12993) @oliviertassinari
+- [infra] Automation: Add release PR reviewers (#12982) @michelengelen
+
 ## 7.3.2
 
 _May 2, 2024_
@@ -17,8 +155,6 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 - 🐞 Bugfixes
 - 📚 Documentation improvements
 
-<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
-
 ### Data Grid
 
 #### `@mui/x-data-grid@7.3.2`
@@ -3281,6 +3417,28 @@ 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.12
+
+_May 17, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.12`
+
+- [pickers] Fix `AdapterMomentJalaali` regression (#13150) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.12` [![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.12`.
+
+### Docs
+
+- [docs] Use MUI X v6 in Codesandbox and Stackblitz demos (#12838) @cherniavskii
+
 ## 6.19.11
 
 _Apr 18, 2024_

package/DataGrid/DataGrid.js

@@ -9,13 +9,18 @@ import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const propValidators = [...propValidatorsDataGrid,
-// Only validate in MIT version
-props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
+let propValidators;
+if (process.env.NODE_ENV !== 'production') {
+  propValidators = [...propValidatorsDataGrid,
+  // Only validate in MIT version
+  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
+}
 const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
-  validateProps(props, propValidators);
+  if (process.env.NODE_ENV !== 'production') {
+    validateProps(props, propValidators);
+  }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -12,6 +12,7 @@ import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelect
 import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
 import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
@@ -44,8 +45,9 @@ export const useGridColumnHeaders = props => {
   const apiRef = useGridPrivateApiContext();
   const theme = useTheme();
   const rootProps = useGridRootProps();
-  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
+  const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
@@ -214,13 +216,13 @@ export const useGridColumnHeaders = props => {
     } = columnsToRender;
     const rowStructure = columnGroupsHeaderStructure[depth];
     const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-    const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
+    const firstGroupToRender = columnGroupsModel[firstColumnFieldToRender]?.[depth] ?? null;
     const firstGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields
     }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
     const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-    const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+    const lastGroupToRender = columnGroupsModel[lastColumnFieldToRender]?.[depth] ?? null;
     const lastGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields

package/hooks/features/editing/useGridRowEditing.js

@@ -550,7 +550,11 @@ export const useGridRowEditing = (apiRef, props) => {
     const copyOfPrevRowModesModel = prevRowModesModel.current;
     prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
 
-    Object.entries(rowModesModel).forEach(([id, params]) => {
+    const ids = new Set([...Object.keys(rowModesModel), ...Object.keys(copyOfPrevRowModesModel)]);
+    Array.from(ids).forEach(id => {
+      const params = rowModesModel[id] ?? {
+        mode: GridRowModes.View
+      };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
       const originalId = idToIdLookup[id] ?? id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {

package/hooks/features/focus/useGridFocus.js

@@ -252,7 +252,7 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
   }, [apiRef]);
   const handleBlur = React.useCallback((_, event) => {
-    if (event.relatedTarget?.className.includes(gridClasses.columnHeader)) {
+    if (event.relatedTarget?.getAttribute('class')?.includes(gridClasses.columnHeader)) {
       return;
     }
     logger.debug(`Clearing focus`);

package/index.js

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

package/internals/utils/propValidation.d.ts

@@ -1,5 +1,5 @@
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 export type PropValidator<TProps> = (props: TProps) => string | undefined;
 export declare const propValidatorsDataGrid: PropValidator<DataGridProcessedProps>[];
-export declare const validateProps: <TProps>(props: TProps, validators: PropValidator<TProps>[]) => void;
-export declare const clearWarningsCache: () => void;
+export declare function validateProps<TProps>(props: TProps, validators: PropValidator<TProps>[]): void;
+export declare function clearWarningsCache(): void;

package/internals/utils/propValidation.js

@@ -2,23 +2,20 @@ import { isNumber } from '../../utils/utils';
 import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
 export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
-const warnOnce = message => {
+function warnOnce(message) {
   if (!warnedOnceCache.has(message)) {
     console.error(message);
     warnedOnceCache.add(message);
   }
-};
-export const validateProps = (props, validators) => {
-  if (process.env.NODE_ENV === 'production') {
-    return;
-  }
+}
+export function validateProps(props, validators) {
   validators.forEach(validator => {
     const warning = validator(props);
     if (warning) {
       warnOnce(warning);
     }
   });
-};
-export const clearWarningsCache = () => {
+}
+export function clearWarningsCache() {
   warnedOnceCache.clear();
-};
+}

package/locales/esES.js

@@ -140,10 +140,10 @@ const esESGrid = {
   rowReorderingHeaderName: 'Reordenar filas',
   // Aggregation
   aggregationMenuItemHeader: 'Agregación',
-  aggregationFunctionLabelSum: 'sum',
-  aggregationFunctionLabelAvg: 'avg',
-  aggregationFunctionLabelMin: 'min',
-  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'promedio',
+  aggregationFunctionLabelMin: 'mínimo',
+  aggregationFunctionLabelMax: 'máximo',
   aggregationFunctionLabelSize: 'tamaño'
 };
 export const esES = getGridLocalization(esESGrid, esESCore);

package/locales/nbNO.js

@@ -30,11 +30,10 @@ const nbNOGrid = {
   toolbarExportPrint: 'Skriv ut',
   toolbarExportExcel: 'Last ned som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Søk',
+  columnsManagementNoColumns: 'Ingen kolonner',
+  columnsManagementShowHideAllText: 'Vis/skjul alle',
+  columnsManagementReset: 'Nullstill',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
   filterPanelRemoveAll: 'Fjern alle',

package/modern/DataGrid/DataGrid.js

@@ -9,13 +9,18 @@ import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const propValidators = [...propValidatorsDataGrid,
-// Only validate in MIT version
-props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
+let propValidators;
+if (process.env.NODE_ENV !== 'production') {
+  propValidators = [...propValidatorsDataGrid,
+  // Only validate in MIT version
+  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
+}
 const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
-  validateProps(props, propValidators);
+  if (process.env.NODE_ENV !== 'production') {
+    validateProps(props, propValidators);
+  }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -12,6 +12,7 @@ import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelect
 import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
 import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
@@ -44,8 +45,9 @@ export const useGridColumnHeaders = props => {
   const apiRef = useGridPrivateApiContext();
   const theme = useTheme();
   const rootProps = useGridRootProps();
-  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
+  const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
@@ -214,13 +216,13 @@ export const useGridColumnHeaders = props => {
     } = columnsToRender;
     const rowStructure = columnGroupsHeaderStructure[depth];
     const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-    const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
+    const firstGroupToRender = columnGroupsModel[firstColumnFieldToRender]?.[depth] ?? null;
     const firstGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields
     }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
     const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-    const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+    const lastGroupToRender = columnGroupsModel[lastColumnFieldToRender]?.[depth] ?? null;
     const lastGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -550,7 +550,11 @@ export const useGridRowEditing = (apiRef, props) => {
     const copyOfPrevRowModesModel = prevRowModesModel.current;
     prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
 
-    Object.entries(rowModesModel).forEach(([id, params]) => {
+    const ids = new Set([...Object.keys(rowModesModel), ...Object.keys(copyOfPrevRowModesModel)]);
+    Array.from(ids).forEach(id => {
+      const params = rowModesModel[id] ?? {
+        mode: GridRowModes.View
+      };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
       const originalId = idToIdLookup[id] ?? id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {

package/modern/hooks/features/focus/useGridFocus.js

@@ -252,7 +252,7 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
   }, [apiRef]);
   const handleBlur = React.useCallback((_, event) => {
-    if (event.relatedTarget?.className.includes(gridClasses.columnHeader)) {
+    if (event.relatedTarget?.getAttribute('class')?.includes(gridClasses.columnHeader)) {
       return;
     }
     logger.debug(`Clearing focus`);

package/modern/index.js

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

package/modern/internals/utils/propValidation.js

@@ -2,23 +2,20 @@ import { isNumber } from '../../utils/utils';
 import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
 export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
-const warnOnce = message => {
+function warnOnce(message) {
   if (!warnedOnceCache.has(message)) {
     console.error(message);
     warnedOnceCache.add(message);
   }
-};
-export const validateProps = (props, validators) => {
-  if (process.env.NODE_ENV === 'production') {
-    return;
-  }
+}
+export function validateProps(props, validators) {
   validators.forEach(validator => {
     const warning = validator(props);
     if (warning) {
       warnOnce(warning);
     }
   });
-};
-export const clearWarningsCache = () => {
+}
+export function clearWarningsCache() {
   warnedOnceCache.clear();
-};
+}

package/modern/locales/esES.js

@@ -140,10 +140,10 @@ const esESGrid = {
   rowReorderingHeaderName: 'Reordenar filas',
   // Aggregation
   aggregationMenuItemHeader: 'Agregación',
-  aggregationFunctionLabelSum: 'sum',
-  aggregationFunctionLabelAvg: 'avg',
-  aggregationFunctionLabelMin: 'min',
-  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'promedio',
+  aggregationFunctionLabelMin: 'mínimo',
+  aggregationFunctionLabelMax: 'máximo',
   aggregationFunctionLabelSize: 'tamaño'
 };
 export const esES = getGridLocalization(esESGrid, esESCore);

package/modern/locales/nbNO.js

@@ -30,11 +30,10 @@ const nbNOGrid = {
   toolbarExportPrint: 'Skriv ut',
   toolbarExportExcel: 'Last ned som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Søk',
+  columnsManagementNoColumns: 'Ingen kolonner',
+  columnsManagementShowHideAllText: 'Vis/skjul alle',
+  columnsManagementReset: 'Nullstill',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
   filterPanelRemoveAll: 'Fjern alle',

package/node/DataGrid/DataGrid.js

@@ -17,13 +17,18 @@ var _propValidation = require("../internals/utils/propValidation");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
-const propValidators = [..._propValidation.propValidatorsDataGrid,
-// Only validate in MIT version
-props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
+let propValidators;
+if (process.env.NODE_ENV !== 'production') {
+  propValidators = [..._propValidation.propValidatorsDataGrid,
+  // Only validate in MIT version
+  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
+}
 const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useDataGridComponent.useDataGridComponent)(props.apiRef, props);
-  (0, _propValidation.validateProps)(props, propValidators);
+  if (process.env.NODE_ENV !== 'production') {
+    (0, _propValidation.validateProps)(props, propValidators);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContextProvider.GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -19,6 +19,7 @@ var _virtualization = require("../virtualization");
 var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
+var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
 var _GridColumnHeaderSeparator = require("../../../components/columnHeaders/GridColumnHeaderSeparator");
@@ -53,8 +54,9 @@ const useGridColumnHeaders = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const theme = (0, _styles.useTheme)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
+  const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
@@ -223,13 +225,13 @@ const useGridColumnHeaders = props => {
     } = columnsToRender;
     const rowStructure = columnGroupsHeaderStructure[depth];
     const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-    const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
+    const firstGroupToRender = columnGroupsModel[firstColumnFieldToRender]?.[depth] ?? null;
     const firstGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields
     }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
     const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-    const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+    const lastGroupToRender = columnGroupsModel[lastColumnFieldToRender]?.[depth] ?? null;
     const lastGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields

package/node/hooks/features/editing/useGridRowEditing.js

@@ -559,7 +559,11 @@ const useGridRowEditing = (apiRef, props) => {
     const copyOfPrevRowModesModel = prevRowModesModel.current;
     prevRowModesModel.current = (0, _utils2.deepClone)(rowModesModel); // Do a deep-clone because the attributes might be changed later
 
-    Object.entries(rowModesModel).forEach(([id, params]) => {
+    const ids = new Set([...Object.keys(rowModesModel), ...Object.keys(copyOfPrevRowModesModel)]);
+    Array.from(ids).forEach(id => {
+      const params = rowModesModel[id] ?? {
+        mode: _gridEditRowModel.GridRowModes.View
+      };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || _gridEditRowModel.GridRowModes.View;
       const originalId = idToIdLookup[id] ?? id;
       if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {

package/node/hooks/features/focus/useGridFocus.js

@@ -262,7 +262,7 @@ const useGridFocus = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
   }, [apiRef]);
   const handleBlur = React.useCallback((_, event) => {
-    if (event.relatedTarget?.className.includes(_gridClasses.gridClasses.columnHeader)) {
+    if (event.relatedTarget?.getAttribute('class')?.includes(_gridClasses.gridClasses.columnHeader)) {
       return;
     }
     logger.debug(`Clearing focus`);

package/node/index.js

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

package/node/internals/utils/propValidation.js

@@ -3,30 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateProps = exports.propValidatorsDataGrid = exports.clearWarningsCache = void 0;
+exports.clearWarningsCache = clearWarningsCache;
+exports.propValidatorsDataGrid = void 0;
+exports.validateProps = validateProps;
 var _utils = require("../../utils/utils");
 var _useGridApiEventHandler = require("../../hooks/utils/useGridApiEventHandler");
 const propValidatorsDataGrid = exports.propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === _useGridApiEventHandler.GridSignature.DataGrid && props.paginationMode === 'client' && (0, _utils.isNumber)(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
-const warnOnce = message => {
+function warnOnce(message) {
   if (!warnedOnceCache.has(message)) {
     console.error(message);
     warnedOnceCache.add(message);
   }
-};
-const validateProps = (props, validators) => {
-  if (process.env.NODE_ENV === 'production') {
-    return;
-  }
+}
+function validateProps(props, validators) {
   validators.forEach(validator => {
     const warning = validator(props);
     if (warning) {
       warnOnce(warning);
     }
   });
-};
-exports.validateProps = validateProps;
-const clearWarningsCache = () => {
+}
+function clearWarningsCache() {
   warnedOnceCache.clear();
-};
-exports.clearWarningsCache = clearWarningsCache;
+}

package/node/locales/esES.js

@@ -146,10 +146,10 @@ const esESGrid = {
   rowReorderingHeaderName: 'Reordenar filas',
   // Aggregation
   aggregationMenuItemHeader: 'Agregación',
-  aggregationFunctionLabelSum: 'sum',
-  aggregationFunctionLabelAvg: 'avg',
-  aggregationFunctionLabelMin: 'min',
-  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'promedio',
+  aggregationFunctionLabelMin: 'mínimo',
+  aggregationFunctionLabelMax: 'máximo',
   aggregationFunctionLabelSize: 'tamaño'
 };
 const esES = exports.esES = (0, _getGridLocalization.getGridLocalization)(esESGrid, _locale.esES);

package/node/locales/nbNO.js

@@ -36,11 +36,10 @@ const nbNOGrid = {
   toolbarExportPrint: 'Skriv ut',
   toolbarExportExcel: 'Last ned som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Søk',
+  columnsManagementNoColumns: 'Ingen kolonner',
+  columnsManagementShowHideAllText: 'Vis/skjul alle',
+  columnsManagementReset: 'Nullstill',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
   filterPanelRemoveAll: 'Fjern alle',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.3.2",
+  "version": "7.5.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,10 +37,10 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.0",
+    "@babel/runtime": "^7.24.5",
     "@mui/system": "^5.15.14",
     "@mui/utils": "^5.15.14",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"
   },