@mui/x-data-grid-pro 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/DataGridPro/DataGridPro.js

@@ -73,7 +73,7 @@ DataGridProRaw.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/components/GridColumnHeaders.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
-interface DataGridProColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
+export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
 }
-declare const GridColumnHeaders: React.ForwardRefExoticComponent<DataGridProColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
 export { GridColumnHeaders };

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -70,7 +70,12 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isMenuOpen = menuOpenField === colDef.field;
 
   // TODO: Support for `isAnyOf` operator
-  const filterOperators = colDef.filterOperators?.filter(operator => operator.value !== 'isAnyOf') ?? [];
+  const filterOperators = React.useMemo(() => {
+    if (!colDef.filterOperators) {
+      return [];
+    }
+    return colDef.filterOperators.filter(operator => operator.value !== 'isAnyOf');
+  }, [colDef.filterOperators]);
   const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
   const filterableColumnsLookup = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterableColumnLookupSelector);
   const isFilterReadOnly = React.useMemo(() => {
@@ -80,7 +85,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const filterModelItem = filterModel.items.find(it => it.field === colDef.field);
     return filterModelItem ? !filterableColumnsLookup[filterModelItem.field] : false;
   }, [colDef.field, filterModel, filterableColumnsLookup]);
-  const currentOperator = filterOperators[0];
+  const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
     if (item.value && !updatedItem.value) {
@@ -181,9 +186,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     showRightBorder
   });
   const classes = useUtilityClasses(ownerState);
-  const isNoInputOperator = filterOperators?.find(({
-    value
-  }) => item.operator === value)?.requiresFilterValue === false;
+  const isNoInputOperator = currentOperator.requiresFilterValue === false;
   const isApplied = Boolean(item?.value) || isNoInputOperator;
   const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;

package/esm/DataGridPro/DataGridPro.js

@@ -65,7 +65,7 @@ DataGridProRaw.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/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -61,7 +61,12 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isMenuOpen = menuOpenField === colDef.field;
 
   // TODO: Support for `isAnyOf` operator
-  const filterOperators = colDef.filterOperators?.filter(operator => operator.value !== 'isAnyOf') ?? [];
+  const filterOperators = React.useMemo(() => {
+    if (!colDef.filterOperators) {
+      return [];
+    }
+    return colDef.filterOperators.filter(operator => operator.value !== 'isAnyOf');
+  }, [colDef.filterOperators]);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
   const isFilterReadOnly = React.useMemo(() => {
@@ -71,7 +76,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const filterModelItem = filterModel.items.find(it => it.field === colDef.field);
     return filterModelItem ? !filterableColumnsLookup[filterModelItem.field] : false;
   }, [colDef.field, filterModel, filterableColumnsLookup]);
-  const currentOperator = filterOperators[0];
+  const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
     if (item.value && !updatedItem.value) {
@@ -172,9 +177,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     showRightBorder
   });
   const classes = useUtilityClasses(ownerState);
-  const isNoInputOperator = filterOperators?.find(({
-    value
-  }) => item.operator === value)?.requiresFilterValue === false;
+  const isNoInputOperator = currentOperator.requiresFilterValue === false;
   const isApplied = Boolean(item?.value) || isNoInputOperator;
   const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxNjQxNTIwMDAwMA==";
+  const releaseInfo = "MTcxNzAxNjQwMDAwMA==";
   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/index.d.ts

@@ -24,3 +24,4 @@ export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverlo
 export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
 export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, } from './components/reexports';
 export { GridColumnHeaders } from './components/GridColumnHeaders';
+export type { GridColumnHeadersProps } from './components/GridColumnHeaders';

package/index.js

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

package/modern/DataGridPro/DataGridPro.js

@@ -65,7 +65,7 @@ DataGridProRaw.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/headerFiltering/GridHeaderFilterCell.js

@@ -61,7 +61,12 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isMenuOpen = menuOpenField === colDef.field;
 
   // TODO: Support for `isAnyOf` operator
-  const filterOperators = colDef.filterOperators?.filter(operator => operator.value !== 'isAnyOf') ?? [];
+  const filterOperators = React.useMemo(() => {
+    if (!colDef.filterOperators) {
+      return [];
+    }
+    return colDef.filterOperators.filter(operator => operator.value !== 'isAnyOf');
+  }, [colDef.filterOperators]);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
   const isFilterReadOnly = React.useMemo(() => {
@@ -71,7 +76,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const filterModelItem = filterModel.items.find(it => it.field === colDef.field);
     return filterModelItem ? !filterableColumnsLookup[filterModelItem.field] : false;
   }, [colDef.field, filterModel, filterableColumnsLookup]);
-  const currentOperator = filterOperators[0];
+  const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
     if (item.value && !updatedItem.value) {
@@ -172,9 +177,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     showRightBorder
   });
   const classes = useUtilityClasses(ownerState);
-  const isNoInputOperator = filterOperators?.find(({
-    value
-  }) => item.operator === value)?.requiresFilterValue === false;
+  const isNoInputOperator = currentOperator.requiresFilterValue === false;
   const isApplied = Boolean(item?.value) || isNoInputOperator;
   const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.5.1
+ * @mui/x-data-grid-pro v7.6.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 = "MTcxNjQxNTIwMDAwMA==";
+  const releaseInfo = "MTcxNzAxNjQwMDAwMA==";
   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.5.1",
+  "version": "7.6.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -33,15 +33,15 @@
     "directory": "packages/x-data-grid-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@mui/system": "^5.15.14",
+    "@babel/runtime": "^7.24.6",
+    "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8",
-    "@mui/x-data-grid": "7.5.1",
-    "@mui/x-license": "7.2.1"
+    "@mui/x-data-grid": "7.6.0",
+    "@mui/x-license": "7.6.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.15.14",

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 = "MTcxNjQxNTIwMDAwMA==";
+  const releaseInfo = "MTcxNzAxNjQwMDAwMA==";
   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