@mui/x-data-grid-pro 7.1.1 → 7.2.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.2.0
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Make grid colors customizable through the MUI themes API
+- 🌍 Improve French (fr-FR), German (de-DE), and Swedish (sv-SE) locales on the Data Grid and Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.2.0`
+
+- [DataGrid] Add missing `api` property to `GridCallbackDetails` (#12742) @sai6855
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12722) @cherniavskii
+- [DataGrid] Fix column vertical border (#12741) @romgrk
+- [DataGrid] Fix invalid date error when filtering `date`/`dateTime` columns (#12709) @cherniavskii
+- [DataGrid] Fix overflow with dynamic row height (#12683) @romgrk
+- [DataGrid] Make colors customizable (#12614) @romgrk
+- [l10n] Improve French (fr-FR) locale (#12755) @derek-0000
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+
+#### `@mui/x-data-grid-pro@7.2.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.2.0`.
+
+#### `@mui/x-data-grid-premium@7.2.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.2.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working when cell loses focus (#12724) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.2.0`
+
+- [fields] Fix field editing after closing the picker (#12675) @LukasTy
+- [l10n] Improve French (fr-FR) locale (#12692) @FaroukBel
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+- [pickers] Fix desktop date time Pickers grid layout (#12748) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.2.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.2.0`, plus:
+
+- [DateTimeRangePicker] Fix desktop toolbar style (#12760) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.2.0`
+
+- [charts] Fix Bar chart with empty dataset throwing an error (#12708) @JCQuintas
+- [charts] Fix `tickLabelInterval` not working on `YAxis` (#12746) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.2.0`
+
+- [TreeView] Add a new lookup to access an item index without expansive computation (#12729) @flaviendelangle
+- [TreeView] Clean up usage of term "node" in internals (#12655) @noraleonte
+- [TreeView] Improve performance by removing `getNavigableChildrenIds` method (#12713) @flaviendelangle
+- [TreeView] Remove `state.items.itemTree` (#12717) @flaviendelangle
+- [TreeView] Remove remaining occurences of the word "node" in the codebase (#12712) @flaviendelangle
+- [TreeView] Return `instance` and `publicAPI` methods from plugin and populate the main objects inside `useTreeView` (#12650) @flaviendelangle
+- [TreeView] Fix behaviors when the item order changes (#12369) @flaviendelangle
+
+### Docs
+
+- [docs] Add `AxisFormatter` documentation for customizing tick/tooltip value formatting (#12700) @JCQuintas
+- [docs] Add file explorer example to rich tree view customization docs (#12707) @noraleonte
+- [docs] Do not use import of depth 3 in the doc (#12716) @flaviendelangle
+- [docs] Explain how to clip plots with composition (#12679) @alexfauquette
+- [docs] Fix typo in Data Grid v7 migration page (#12720) @bfaulk96
+- [docs] Fix typo in Pickers v7 migration page (#12721) @bfaulk96
+
+### Core
+
+- [core] Support multiple resolved `l10n` PR packages (#12735) @LukasTy
+- [core] Update Netlify release references in release README (#12687) @LukasTy
+- [core] Use `describeTreeView` for icons tests (#12672) @flaviendelangle
+- [core] Use `describeTreeView` in existing tests for `useTreeViewItems` (#12732) @flaviendelangle
+
 ## 7.1.1
 
 _Apr 5, 2024_

package/components/headerFiltering/GridHeaderFilterCell.d.ts

@@ -20,6 +20,7 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
     style?: React.CSSProperties;
     indexInSection: number;
     sectionLength: number;
+    gridHasFiller: boolean;
 }
 declare const Memoized: React.ForwardRefExoticComponent<GridHeaderFilterCellProps & React.RefAttributes<HTMLDivElement>>;
 export { Memoized as GridHeaderFilterCell };

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -17,7 +17,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridHeaderFilterMenuContainer = require("./GridHeaderFilterMenuContainer");
 var _GridHeaderFilterClearButton = require("./GridHeaderFilterClearButton");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength", "gridHasFiller"];
 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 && Object.prototype.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 useUtilityClasses = ownerState => {
@@ -53,7 +53,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       pinnedPosition,
       style: styleProp,
       indexInSection,
-      sectionLength
+      sectionLength,
+      gridHasFiller
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _internals.useGridPrivateApiContext)();
@@ -172,7 +173,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
   const showLeftBorder = (0, _internals.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _internals.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = (0, _internals.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, rootProps, {
     pinnedPosition,
     colDef,
@@ -252,6 +253,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: _propTypes.default.object.isRequired,
   colIndex: _propTypes.default.number.isRequired,
+  gridHasFiller: _propTypes.default.bool.isRequired,
   hasFocus: _propTypes.default.bool,
   /**
    * Class name that will be added in the column header cell.

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength", "gridHasFiller"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -45,7 +45,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       pinnedPosition,
       style: styleProp,
       indexInSection,
-      sectionLength
+      sectionLength,
+      gridHasFiller
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
@@ -164,7 +165,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
   const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = _extends({}, rootProps, {
     pinnedPosition,
     colDef,
@@ -244,6 +245,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
   colIndex: PropTypes.number.isRequired,
+  gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   /**
    * Class name that will be added in the column header cell.

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
 import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition } from '@mui/x-data-grid';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition, gridDimensionsSelector } from '@mui/x-data-grid';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow } from '@mui/x-data-grid/internals';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -48,8 +48,9 @@ export const useGridColumnHeaders = props => {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   const disableHeaderFiltering = !rootProps.headerFilters;
-  const dimensions = apiRef.current.getRootDimensions();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
@@ -105,7 +106,8 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: i,
-        sectionLength: renderedColumns.length
+        sectionLength: renderedColumns.length,
+        gridHasFiller: gridHasFiller
       }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
     return otherProps.getFillers(params, filters, 0, true);

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxMjI2NDQwMDAwMA==";
+  const releaseInfo = "MTcxMjg2OTIwMDAwMA==";
   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/columnHeaders/useGridColumnHeaders.js

@@ -56,8 +56,9 @@ const useGridColumnHeaders = props => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   const disableHeaderFiltering = !rootProps.headerFilters;
-  const dimensions = apiRef.current.getRootDimensions();
+  const dimensions = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridDimensionsSelector);
   const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
+  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
@@ -113,7 +114,8 @@ const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: i,
-        sectionLength: renderedColumns.length
+        sectionLength: renderedColumns.length,
+        gridHasFiller: gridHasFiller
       }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
     return otherProps.getFillers(params, filters, 0, true);

package/index.js

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

package/modern/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength"];
+const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "style", "indexInSection", "sectionLength", "gridHasFiller"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -45,7 +45,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       pinnedPosition,
       style: styleProp,
       indexInSection,
-      sectionLength
+      sectionLength,
+      gridHasFiller
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
@@ -164,7 +165,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
   const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = _extends({}, rootProps, {
     pinnedPosition,
     colDef,
@@ -244,6 +245,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
   colIndex: PropTypes.number.isRequired,
+  gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   /**
    * Class name that will be added in the column header cell.

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
 import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition } from '@mui/x-data-grid';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition, gridDimensionsSelector } from '@mui/x-data-grid';
 import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow } from '@mui/x-data-grid/internals';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -48,8 +48,9 @@ export const useGridColumnHeaders = props => {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   const disableHeaderFiltering = !rootProps.headerFilters;
-  const dimensions = apiRef.current.getRootDimensions();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
@@ -105,7 +106,8 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: i,
-        sectionLength: renderedColumns.length
+        sectionLength: renderedColumns.length,
+        gridHasFiller: gridHasFiller
       }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
     }
     return otherProps.getFillers(params, filters, 0, true);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.1.1
+ * @mui/x-data-grid-pro v7.2.0
  *
  * @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 = "MTcxMjI2NDQwMDAwMA==";
+  const releaseInfo = "MTcxMjg2OTIwMDAwMA==";
   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.1.1",
+  "version": "7.2.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -35,8 +35,8 @@
     "@babel/runtime": "^7.24.0",
     "@mui/system": "^5.15.14",
     "@mui/utils": "^5.15.14",
-    "@mui/x-data-grid": "7.1.1",
-    "@mui/x-license": "7.1.1",
+    "@mui/x-data-grid": "7.2.0",
+    "@mui/x-license": "7.2.0",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",

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 = "MTcxMjI2NDQwMDAwMA==";
+  const releaseInfo = "MTcxMjg2OTIwMDAwMA==";
   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