@mui/x-data-grid-pro 7.23.3 → 7.23.5

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.23.5
+
+_Dec 27, 2024_
+
+Here are some highlights ✨:
+
+- 🐞 Fix version mismatch issue in Data Grid codesandbox/stackblitz demos
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.5`
+
+No changes since `@mui/x-data-grid@v7.23.4`.
+
+#### `@mui/x-data-grid-pro@7.23.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.23.5`.
+
+#### `@mui/x-data-grid-premium@7.23.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.23.5`.
+
+## v7.23.4
+
+_Dec 27, 2024_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Dutch (nl-NL) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributor who has helped make this release possible:
+@JoepVerkoelen.
+Following are all team members who have contributed to this release:
+@arminmeh, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.4`
+
+- [DataGrid] Fix header filters showing clear button while empty (#15990) @k-rajat19
+- [DataGrid] Replace `forwardRef` with a shim for forward compatibility (#15984) @lauri865
+- [l10n] Improve Dutch (nl-NL) locale (#15920) @JoepVerkoelen
+
+#### `@mui/x-data-grid-pro@7.23.4` [![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.23.4`.
+
+#### `@mui/x-data-grid-premium@7.23.4` [![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.23.4`, plus:
+
+- [DataGridPremium] Fix column pinning with checkbox selection and row grouping (#15949) @k-rajat19
+
+### Docs
+
+- [docs] Fix outdated link to handbook (#15855) @oliviertassinari
+
 ## 7.23.3
 
 _Dec 19, 2024_

package/DataGridPro/DataGridPro.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xLicense = require("@mui/x-license");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useDataGridProComponent = require("./useDataGridProComponent");
 var _useDataGridProProps = require("./useDataGridProProps");
 var _releaseInfo = require("../utils/releaseInfo");
@@ -27,7 +28,7 @@ const configuration = {
   }
 };
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
-const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
+const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps, ref) {
   const props = (0, _useDataGridProProps.useDataGridProProps)(inProps);
   const privateApiRef = (0, _useDataGridProComponent.useDataGridProComponent)(props.apiRef, props);
   (0, _xLicense.useLicenseVerifier)('x-data-grid-pro', releaseInfo);
@@ -41,9 +42,9 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGrid.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
+      sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridBody, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
           packageName: "x-data-grid-pro",

package/README.md

@@ -1,7 +1,7 @@
 # MUI X Data Grid Pro
 
 This package is the Pro plan edition of the Data Grid component.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 

package/components/GridColumnHeaders.d.ts

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

package/components/GridColumnHeaders.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid/internals");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["style", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
@@ -19,7 +20,7 @@ const Filler = (0, _styles.styled)('div')({
   flex: 1,
   backgroundColor: 'var(--DataGrid-containerBackground)'
 });
-const GridColumnHeaders = exports.GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = exports.GridColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders(props, ref) {
   const {
       className,
       visibleColumns,
@@ -56,9 +57,9 @@ const GridColumnHeaders = exports.GridColumnHeaders = /*#__PURE__*/React.forward
     columnGroupsHeaderStructure
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridBaseColumnHeaders, (0, _extends2.default)({
-    ref: ref,
     className: className
   }, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filler, {})]
   }));
 });

package/components/GridProColumnMenu.d.ts

@@ -21,4 +21,4 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PRO: {
         displayOrder: number;
     };
 };
-export declare const GridProColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+export declare const GridProColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;

package/components/GridProColumnMenu.js

@@ -9,6 +9,7 @@ exports.GridProColumnMenu = exports.GRID_COLUMN_MENU_SLOT_PROPS_PRO = exports.GR
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGrid = require("@mui/x-data-grid");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridColumnMenuPinningItem = require("./GridColumnMenuPinningItem");
 var _jsxRuntime = require("react/jsx-runtime");
 const GRID_COLUMN_MENU_SLOTS_PRO = exports.GRID_COLUMN_MENU_SLOTS_PRO = (0, _extends2.default)({}, _xDataGrid.GRID_COLUMN_MENU_SLOTS, {
@@ -19,11 +20,10 @@ const GRID_COLUMN_MENU_SLOT_PROPS_PRO = exports.GRID_COLUMN_MENU_SLOT_PROPS_PRO
     displayOrder: 15
   }
 });
-const GridProColumnMenu = exports.GridProColumnMenu = /*#__PURE__*/React.forwardRef(function GridProColumnMenu(props, ref) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridGenericColumnMenu, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+const GridProColumnMenu = exports.GridProColumnMenu = (0, _forwardRef.forwardRef)(function GridProColumnMenu(props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridGenericColumnMenu, (0, _extends2.default)({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PRO,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO,
+    ref: ref
   }));
 });

package/components/headerFiltering/GridHeaderFilterCell.d.ts

@@ -22,5 +22,5 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
     sectionLength: number;
     gridHasFiller: boolean;
 }
-declare const Memoized: React.ForwardRefExoticComponent<GridHeaderFilterCellProps & React.RefAttributes<HTMLDivElement>>;
+declare const Memoized: React.ForwardRefExoticComponent<GridHeaderFilterCellProps> | React.ForwardRefExoticComponent<GridHeaderFilterCellProps & React.RefAttributes<HTMLDivElement>>;
 export { Memoized as GridHeaderFilterCell };

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -15,6 +15,7 @@ var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridHeaderFilterMenuContainer = require("./GridHeaderFilterMenuContainer");
 var _GridHeaderFilterClearButton = require("./GridHeaderFilterClearButton");
@@ -48,7 +49,7 @@ const defaultInputComponents = {
   actions: null,
   custom: null
 };
-const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
       colIndex,
       height,
@@ -97,13 +98,6 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [colDef.field, filterModel, filterableColumnsLookup]);
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
-  const applyFilterChanges = React.useCallback(updatedItem => {
-    if (item.value && updatedItem.value === undefined) {
-      apiRef.current.deleteFilterItem(updatedItem);
-      return;
-    }
-    apiRef.current.upsertFilterItem(updatedItem);
-  }, [apiRef, item]);
   const clearFilterItem = React.useCallback(() => {
     apiRef.current.deleteFilterItem(item);
   }, [apiRef, item]);
@@ -204,7 +198,6 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, headerClassName),
-    ref: handleRef,
     style: (0, _extends2.default)({
       height,
       width
@@ -213,12 +206,13 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
   }, other, mouseEventsHandlers, {
+    ref: handleRef,
     children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, (0, _extends2.default)({
         apiRef: apiRef,
         item: item,
         inputRef: inputRef,
-        applyValue: applyFilterChanges,
+        applyValue: apiRef.current.upsertFilterItem,
         onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
         onBlur: event => {
           apiRef.current.stopHeaderFilterEditMode();
@@ -252,7 +246,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         item: item,
         field: colDef.field,
         disabled: isFilterReadOnly,
-        applyFilterChanges: applyFilterChanges,
+        applyFilterChanges: apiRef.current.upsertFilterItem,
         headerFilterMenuRef: headerFilterMenuRef,
         buttonRef: buttonRef
       })]

package/esm/DataGridPro/DataGridPro.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { validateProps } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridProComponent } from "./useDataGridProComponent.js";
 import { useDataGridProProps } from "./useDataGridProProps.js";
 import { getReleaseInfo } from "../utils/releaseInfo.js";
@@ -20,7 +21,7 @@ const configuration = {
   }
 };
 const releaseInfo = getReleaseInfo();
-const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
+const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
   const privateApiRef = useDataGridProComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-pro', releaseInfo);
@@ -34,9 +35,9 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
+      sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-pro",

package/esm/components/GridColumnHeaders.js

@@ -5,13 +5,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { GridBaseColumnHeaders } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Filler = styled('div')({
   flex: 1,
   backgroundColor: 'var(--DataGrid-containerBackground)'
 });
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className,
       visibleColumns,
@@ -48,9 +49,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure
   });
   return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
-    ref: ref,
     className: className
   }, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/_jsx(Filler, {})]
   }));
 });

package/esm/components/GridProColumnMenu.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_COLUMN_MENU_SLOTS_PRO = _extends({}, GRID_COLUMN_MENU_SLOTS, {
@@ -11,11 +12,10 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PRO = _extends({}, GRID_COLUMN_MENU_SLO
     displayOrder: 15
   }
 });
-export const GridProColumnMenu = /*#__PURE__*/React.forwardRef(function GridProColumnMenu(props, ref) {
-  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({
-    ref: ref
-  }, props, {
+export const GridProColumnMenu = forwardRef(function GridProColumnMenu(props, ref) {
+  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PRO,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO,
+    ref: ref
   }));
 });

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -8,6 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeCl
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
 import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridHeaderFilterMenuContainer } from "./GridHeaderFilterMenuContainer.js";
 import { GridHeaderFilterClearButton } from "./GridHeaderFilterClearButton.js";
@@ -40,7 +41,7 @@ const defaultInputComponents = {
   actions: null,
   custom: null
 };
-const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridHeaderFilterCell = forwardRef((props, ref) => {
   const {
       colIndex,
       height,
@@ -89,13 +90,6 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [colDef.field, filterModel, filterableColumnsLookup]);
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
-  const applyFilterChanges = React.useCallback(updatedItem => {
-    if (item.value && updatedItem.value === undefined) {
-      apiRef.current.deleteFilterItem(updatedItem);
-      return;
-    }
-    apiRef.current.upsertFilterItem(updatedItem);
-  }, [apiRef, item]);
   const clearFilterItem = React.useCallback(() => {
     apiRef.current.deleteFilterItem(item);
   }, [apiRef, item]);
@@ -196,7 +190,6 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/_jsxs("div", _extends({
     className: clsx(classes.root, headerClassName),
-    ref: handleRef,
     style: _extends({
       height,
       width
@@ -205,12 +198,13 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
   }, other, mouseEventsHandlers, {
+    ref: handleRef,
     children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(InputComponent, _extends({
         apiRef: apiRef,
         item: item,
         inputRef: inputRef,
-        applyValue: applyFilterChanges,
+        applyValue: apiRef.current.upsertFilterItem,
         onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
         onBlur: event => {
           apiRef.current.stopHeaderFilterEditMode();
@@ -244,7 +238,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         item: item,
         field: colDef.field,
         disabled: isFilterReadOnly,
-        applyFilterChanges: applyFilterChanges,
+        applyFilterChanges: apiRef.current.upsertFilterItem,
         headerFilterMenuRef: headerFilterMenuRef,
         buttonRef: buttonRef
       })]

package/esm/utils/releaseInfo.js

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

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

package/modern/DataGridPro/DataGridPro.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { validateProps } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridProComponent } from "./useDataGridProComponent.js";
 import { useDataGridProProps } from "./useDataGridProProps.js";
 import { getReleaseInfo } from "../utils/releaseInfo.js";
@@ -20,7 +21,7 @@ const configuration = {
   }
 };
 const releaseInfo = getReleaseInfo();
-const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
+const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
   const privateApiRef = useDataGridProComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-pro', releaseInfo);
@@ -34,9 +35,9 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
+      sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-pro",

package/modern/components/GridColumnHeaders.js

@@ -5,13 +5,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { GridBaseColumnHeaders } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Filler = styled('div')({
   flex: 1,
   backgroundColor: 'var(--DataGrid-containerBackground)'
 });
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className,
       visibleColumns,
@@ -48,9 +49,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure
   });
   return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
-    ref: ref,
     className: className
   }, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/_jsx(Filler, {})]
   }));
 });

package/modern/components/GridProColumnMenu.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_COLUMN_MENU_SLOTS_PRO = _extends({}, GRID_COLUMN_MENU_SLOTS, {
@@ -11,11 +12,10 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PRO = _extends({}, GRID_COLUMN_MENU_SLO
     displayOrder: 15
   }
 });
-export const GridProColumnMenu = /*#__PURE__*/React.forwardRef(function GridProColumnMenu(props, ref) {
-  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({
-    ref: ref
-  }, props, {
+export const GridProColumnMenu = forwardRef(function GridProColumnMenu(props, ref) {
+  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PRO,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO,
+    ref: ref
   }));
 });

package/modern/components/headerFiltering/GridHeaderFilterCell.js

@@ -8,6 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeCl
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
 import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridHeaderFilterMenuContainer } from "./GridHeaderFilterMenuContainer.js";
 import { GridHeaderFilterClearButton } from "./GridHeaderFilterClearButton.js";
@@ -40,7 +41,7 @@ const defaultInputComponents = {
   actions: null,
   custom: null
 };
-const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridHeaderFilterCell = forwardRef((props, ref) => {
   const {
       colIndex,
       height,
@@ -89,13 +90,6 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [colDef.field, filterModel, filterableColumnsLookup]);
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
-  const applyFilterChanges = React.useCallback(updatedItem => {
-    if (item.value && updatedItem.value === undefined) {
-      apiRef.current.deleteFilterItem(updatedItem);
-      return;
-    }
-    apiRef.current.upsertFilterItem(updatedItem);
-  }, [apiRef, item]);
   const clearFilterItem = React.useCallback(() => {
     apiRef.current.deleteFilterItem(item);
   }, [apiRef, item]);
@@ -196,7 +190,6 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/_jsxs("div", _extends({
     className: clsx(classes.root, headerClassName),
-    ref: handleRef,
     style: _extends({
       height,
       width
@@ -205,12 +198,13 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
   }, other, mouseEventsHandlers, {
+    ref: handleRef,
     children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(InputComponent, _extends({
         apiRef: apiRef,
         item: item,
         inputRef: inputRef,
-        applyValue: applyFilterChanges,
+        applyValue: apiRef.current.upsertFilterItem,
         onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
         onBlur: event => {
           apiRef.current.stopHeaderFilterEditMode();
@@ -244,7 +238,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         item: item,
         field: colDef.field,
         disabled: isFilterReadOnly,
-        applyFilterChanges: applyFilterChanges,
+        applyFilterChanges: apiRef.current.upsertFilterItem,
         headerFilterMenuRef: headerFilterMenuRef,
         buttonRef: buttonRef
       })]

package/modern/index.js

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

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTIzOTYwMDAwMA==";
   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.23.3",
+  "version": "7.23.5",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -39,9 +39,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-internals": "7.23.0",
-    "@mui/x-data-grid": "7.23.3",
-    "@mui/x-license": "7.23.2"
+    "@mui/x-internals": "7.23.5",
+    "@mui/x-data-grid": "7.23.5",
+    "@mui/x-license": "7.23.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTIzOTYwMDAwMA==";
   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