@mui/x-data-grid 8.0.0-beta.0 → 8.0.0-beta.1

package/CHANGELOG.md

@@ -5,6 +5,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.1` [![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@8.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.1` [![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@8.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.1` [![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@8.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/components/columnSelection/GridHeaderCheckbox.js

@@ -77,7 +77,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to a Set to make O(1) checking if a row exists or not
     const candidates = new Set();
@@ -88,7 +88,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
       }
     }
     return candidates;
-  }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [apiRef, rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => {

package/esm/components/columnSelection/GridHeaderCheckbox.js

@@ -69,7 +69,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to a Set to make O(1) checking if a row exists or not
     const candidates = new Set();
@@ -80,7 +80,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       }
     }
     return candidates;
-  }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [apiRef, rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => {

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

@@ -405,7 +405,7 @@ export const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-beta.0
+ * @mui/x-data-grid v8.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/material/index.js

@@ -38,7 +38,7 @@ import MUIInputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdo
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPagination, { tablePaginationClasses } from '@mui/material/TablePagination';
 import MUIPopper from '@mui/material/Popper';
-import MUIClickAwayListener from '@mui/material/ClickAwayListener';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import MUIGrow from '@mui/material/Grow';
 import MUIPaper from '@mui/material/Paper';
 import MUIInputLabel from '@mui/material/InputLabel';
@@ -50,7 +50,6 @@ import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { useMaterialCSSVariables } from "./variables.js";
-const ClickAwayListener = forwardRef(MUIClickAwayListener);
 const InputAdornment = styled(MUIInputAdornment)({
   [`&.${inputAdornmentClasses.positionEnd} .${iconButtonClasses.sizeSmall}`]: {
     marginRight: '-7px'

package/hooks/features/editing/useGridRowEditing.js

@@ -413,7 +413,7 @@ const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-beta.0
+ * @mui/x-data-grid v8.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/material/index.js

@@ -64,7 +64,6 @@ const _excluded = ["id", "label", "labelId", "disabled", "slotProps", "onChange"
   _excluded8 = ["inputProps", "InputProps", "InputLabelProps"],
   _excluded9 = ["slotProps"],
   _excluded10 = ["native"];
-const ClickAwayListener = (0, _forwardRef.forwardRef)(_ClickAwayListener.default);
 const InputAdornment = (0, _styles.styled)(_InputAdornment.default)({
   [`&.${_InputAdornment.inputAdornmentClasses.positionEnd} .${_IconButton.iconButtonClasses.sizeSmall}`]: {
     marginRight: '-7px'
@@ -526,7 +525,7 @@ function clickAwayWrapper(props, content) {
   if (props.onClickAway === undefined) {
     return content;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickAwayListener, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
     onClickAway: props.onClickAway,
     touchEvent: props.clickAwayTouchEvent,
     mouseEvent: props.clickAwayMouseEvent,

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -69,7 +69,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to a Set to make O(1) checking if a row exists or not
     const candidates = new Set();
@@ -80,7 +80,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       }
     }
     return candidates;
-  }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [apiRef, rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => {

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

@@ -405,7 +405,7 @@ export const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-beta.0
+ * @mui/x-data-grid v8.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/material/index.js

@@ -38,7 +38,7 @@ import MUIInputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdo
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPagination, { tablePaginationClasses } from '@mui/material/TablePagination';
 import MUIPopper from '@mui/material/Popper';
-import MUIClickAwayListener from '@mui/material/ClickAwayListener';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import MUIGrow from '@mui/material/Grow';
 import MUIPaper from '@mui/material/Paper';
 import MUIInputLabel from '@mui/material/InputLabel';
@@ -50,7 +50,6 @@ import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { useMaterialCSSVariables } from "./variables.js";
-const ClickAwayListener = forwardRef(MUIClickAwayListener);
 const InputAdornment = styled(MUIInputAdornment)({
   [`&.${inputAdornmentClasses.positionEnd} .${iconButtonClasses.sizeSmall}`]: {
     marginRight: '-7px'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",