@mui/x-data-grid 7.12.0 → 7.12.1

package/CHANGELOG.md

@@ -3,6 +3,74 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.12.1
+
+_Aug 8, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Charts get a new component to display color mapping in the legend
+- 🚀 The `@mui/x-charts-pro` is released in alpha version 🧪. This new package introduces two main features:
+  - The Heatmap component
+  - The zoom interaction on the bar, line, and scatter charts
+- 🌍 Improve Dutch (nl-NL) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.12.1`
+
+- [DataGrid] Fix `checkboxSelectionVisibleOnly` behavior with server-side pagination (#14083) @MBilalShafi
+- [DataGrid] Fix `columnHeadersContainerRef` being `undefined` before mount (#14051) @samwato
+- [DataGrid] Support Yarn PnP (#14126) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.12.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@7.12.1`.
+
+#### `@mui/x-data-grid-premium@7.12.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@7.12.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.12.1`
+
+- [l10n] Improve Dutch (nlNL) locale (pickers) (#14036) @Robin1896
+
+#### `@mui/x-date-pickers-pro@7.12.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@7.12.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.12.1`
+
+- [charts] Fix charts vendor publish config (#14073) @JCQuintas
+- [charts] Move `plugins` to `PluginProvider` (#14056) @JCQuintas
+
+#### `@mui/x-date-charts-pro@7.0.0-alpha.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-charts@7.12.1`, plus:
+
+- [charts-pro] Release the pro package in alpha (#13859) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.12.1`
+
+### Docs
+
+- [docs] Add a warning to promote the usage of `updateRows` (#14027) @MBilalShafi
+- [docs] Disable ad in `Rich Tree View-Ordering` page (#14123) @oliviertassinari
+- [docs] Redesign Date and Time Pickers overview page (#13241) @noraleonte
+
+- [CHANGELOG] Polish details @oliviertassinari
+- [code-infra] Use concurrency 1 in CircleCI (#14110) @JCQuintas
+- [infra] Re-added the removal of `Latest Version` section (#14132) @michelengelen
+
 ## 7.12.0
 
 _Aug 1, 2024_
@@ -24,9 +92,9 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 - 🎁 Introduce [item reordering using drag and drop](https://mui.com/x/react-tree-view/rich-tree-view/ordering/) on the `RichTreeViewPro` component
 
-  <img width="384" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />
+  <img width="287" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />
 
-- 📦 Support Common JS bundle out of the box on `@mui/x-charts` by adding vendored D3 dependencies.
+- 📦 Support CommonJS bundle out of the box on `@mui/x-charts` by adding vendored D3 dependencies.
 
   - This modifies how the package imports D3.js. It will impact you if you use `d3` packages installed by `@mui/x-charts` and don't have them in your `package.json`. You shouldn't be affected otherwise.
   - For more context, the initial issue is caused by D3 only exporting ESM.

package/components/GridHeaders.js

@@ -27,10 +27,7 @@ function GridHeaders() {
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const columnsContainerRef = React.useRef(null);
-  apiRef.current.register('private', {
-    columnHeadersContainerRef: columnsContainerRef
-  });
+  const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
     ref: columnsContainerRef,
     visibleColumns: visibleColumns,

package/hooks/core/useGridRefs.js

@@ -3,11 +3,13 @@ export const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
   });
   apiRef.current.register('private', {
     mainElementRef,
-    virtualScrollerRef
+    virtualScrollerRef,
+    columnHeadersContainerRef
   });
 };

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -272,11 +272,10 @@ export const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
-    const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
-    const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);
+    const rowsToBeSelected = props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client' ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);
     const filterModel = gridFilterModelSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
-  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
+  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination, props.paginationMode]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Get the most recent cell mode because it may have been changed by another listener
     if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.Edit) {

package/index.js

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

package/models/api/gridCoreApi.d.ts

@@ -67,7 +67,7 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
     /**
      * The React ref of the grid column container virtualized div element.
      */
-    columnHeadersContainerRef?: React.RefObject<HTMLDivElement>;
+    columnHeadersContainerRef: React.RefObject<HTMLDivElement>;
     /**
      * The React ref of the grid header filter row element.
      */

package/modern/components/GridHeaders.js

@@ -27,10 +27,7 @@ function GridHeaders() {
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const columnsContainerRef = React.useRef(null);
-  apiRef.current.register('private', {
-    columnHeadersContainerRef: columnsContainerRef
-  });
+  const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
     ref: columnsContainerRef,
     visibleColumns: visibleColumns,

package/modern/hooks/core/useGridRefs.js

@@ -3,11 +3,13 @@ export const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
   });
   apiRef.current.register('private', {
     mainElementRef,
-    virtualScrollerRef
+    virtualScrollerRef,
+    columnHeadersContainerRef
   });
 };

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -272,11 +272,10 @@ export const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
-    const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
-    const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);
+    const rowsToBeSelected = props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client' ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef);
     const filterModel = gridFilterModelSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
-  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
+  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination, props.paginationMode]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Get the most recent cell mode because it may have been changed by another listener
     if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.Edit) {

package/modern/index.js

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

package/node/components/GridHeaders.js

@@ -36,10 +36,7 @@ function GridHeaders() {
   const columnVisibility = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const columnsContainerRef = React.useRef(null);
-  apiRef.current.register('private', {
-    columnHeadersContainerRef: columnsContainerRef
-  });
+  const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaders, (0, _extends2.default)({
     ref: columnsContainerRef,
     visibleColumns: visibleColumns,

package/node/hooks/core/useGridRefs.js

@@ -11,12 +11,14 @@ const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
   });
   apiRef.current.register('private', {
     mainElementRef,
-    virtualScrollerRef
+    virtualScrollerRef,
+    columnHeadersContainerRef
   });
 };
 exports.useGridRefs = useGridRefs;

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -282,11 +282,10 @@ const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
-    const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
-    const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.gridExpandedSortedRowIdsSelector)(apiRef);
+    const rowsToBeSelected = props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client' ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.gridExpandedSortedRowIdsSelector)(apiRef);
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
-  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
+  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination, props.paginationMode]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Get the most recent cell mode because it may have been changed by another listener
     if (apiRef.current.getCellMode(params.id, params.field) === _gridEditRowModel.GridCellModes.Edit) {

package/node/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.12.0",
+  "version": "7.12.1",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -46,10 +46,20 @@
     "@mui/x-internals": "7.12.0"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
+    "@emotion/styled": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=14.0.0"
   },