Merge branch 'master' into virtualization-tree-view

CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.13.0
+
+_Aug 16, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow to [edit the label](https://mui.com/x/react-tree-view/rich-tree-view/editing/) of Tree View's items.
+
+  <img width="344" src="https://github.com/user-attachments/assets/1a6cf765-2dc8-4906-bd93-139086eed148" alt="Item label editing" />
+
+- 🔧 Improve rows accessibility on the Data Grid features "Tree Data" and "Row Grouping". Certain "Row Grouping" accessibility updates will only be applied if experimental feature flag is enabled. See the [documentation](https://mui.com/x/react-data-grid/row-grouping/#accessibility-changes-in-v8) for more information.
+- 🌍 Improve Vietnamese (vi-VN) locale on the Data Grid
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Fix CSV export for `null` and `undefined` values (#14166) @k-rajat19
+- [DataGrid] Fix error logged during skeleton loading with nested data grid (#14186) @KenanYusuf
+- [DataGrid] Remove needless check in `useGridStateInitialization` (#14181) @k-rajat19
+- [DataGrid] Add recipe for persisting filters in local storage (#14208) @cherniavskii
+- [l10n] Improve Vietnamese (vi-VN) locale (#14216) @hungnd-casso
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DataGridPro] Fix Tree Data and Row Grouping rows accessibility (#13623) @arminmeh
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Date and Time Pickers
+
+#### `@mui/[email protected]`
+
+- [pickers] Fix date and time merging to retain milliseconds (#14173) @LukasTy
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Charts
+
+#### `@mui/[email protected]`
+
+- [charts] Add `baseline` property to the `LineChart` `series` (#14153) @JCQuintas
+- [charts] Fix issue where tooltip would disappear on mouse click (#14187) @alexfauquette
+- [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
+- [charts] Support axis with the same value for all data points (#14191) @alexfauquette
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Tree View
+
+#### `@mui/[email protected]`
+
+- [TreeView] Add label editing feature (#13388) @noraleonte
+- [TreeView] Fix the parameters passed for the `canMoveItemToNewPosition` prop (#14176) @flaviendelangle
+
+### Docs
+
+- [docs] Extract dataset in the Line chart docs (#14034) @alexfauquette
+- [docs] Remove redundant encoding in the mock data source server (#14185) @MBilalShafi
+- [docs] Use Netflix financial results to document bar charts (#13991) @alexfauquette
+- [docs] Remove relience of abbreviations (#14226) @oliviertassinari
+
+### Core
+
+- [core] Bump monorepo (#14141) @Janpot
+- [core] Fix ESLint issue (#14207) @LukasTy
+- [core] Fix Netlify build cache issue (#14182) @cherniavskii
+- [code-infra] Refactor Netlify `cache-docs` plugin setup (#14105) @LukasTy
+- [internals] Move utils needed for tree view virtualization to shared package (#14202) @flaviendelangle
+
 ## 7.12.1
 
 _Aug 8, 2024_

SECURITY.md

@@ -4,11 +4,12 @@
 
 The versions of the project that are currently supported with security updates.
 
-| Version | Supported          |
-| ------: | :----------------- |
-|     6.x | :white_check_mark: |
-|     5.x | :white_check_mark: |
-|   < 5.0 | :x:                |
+| MUI X version | Release    | Supported                            |
+| ------------: | :--------- | :----------------------------------- |
+|        ^7.0.0 | 2024-03-23 | :white_check_mark: Stable major      |
+|        ^6.0.0 | 2023-03-03 | :white_check_mark: Long-term support |
+|        ^5.0.0 | 2021-11-23 | :x:                                  |
+|        ^4.0.0 | 2021-09-28 | :x:                                  |
 
 ## Reporting a vulnerability
 

docs/data/data-grid/filtering-recipes/FilteringLocalStorage.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+const createFilterModelStore = () => {
+  let listeners = [];
+  const lsKey = 'gridFilterModel';
+  const emptyModel = 'null';
+
+  return {
+    subscribe: (callback) => {
+      listeners.push(callback);
+      return () => {
+        listeners = listeners.filter((listener) => listener !== callback);
+      };
+    },
+    getSnapshot: () => {
+      try {
+        return localStorage.getItem(lsKey) || emptyModel;
+      } catch (error) {
+        return emptyModel;
+      }
+    },
+    getServerSnapshot: () => {
+      return emptyModel;
+    },
+    update: (filterModel) => {
+      localStorage.setItem(lsKey, JSON.stringify(filterModel));
+      listeners.forEach((listener) => listener());
+    },
+  };
+};
+
+const usePersistedFilterModel = () => {
+  const [filterModelStore] = React.useState(createFilterModelStore);
+
+  const filterModelString = React.useSyncExternalStore(
+    filterModelStore.subscribe,
+    filterModelStore.getSnapshot,
+    filterModelStore.getServerSnapshot,
+  );
+
+  const filterModel = React.useMemo(() => {
+    try {
+      return JSON.parse(filterModelString) || undefined;
+    } catch (error) {
+      return undefined;
+    }
+  }, [filterModelString]);
+
+  return React.useMemo(
+    () => [filterModel, filterModelStore.update],
+    [filterModel, filterModelStore.update],
+  );
+};
+
+export default function FilteringLocalStorage() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  const [filterModel, setFilterModel] = usePersistedFilterModel();
+
+  const onFilterModelChange = React.useCallback(
+    (newFilterModel) => {
+      setFilterModel(newFilterModel);
+    },
+    [setFilterModel],
+  );
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        slots={{ toolbar: GridToolbar }}
+        filterModel={filterModel}
+        onFilterModelChange={onFilterModelChange}
+      />
+    </div>
+  );
+}

docs/data/data-grid/filtering-recipes/FilteringLocalStorage.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {
+  DataGrid,
+  DataGridProps,
+  GridFilterModel,
+  GridToolbar,
+} from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+const createFilterModelStore = () => {
+  let listeners: Array<() => void> = [];
+  const lsKey = 'gridFilterModel';
+  const emptyModel = 'null';
+
+  return {
+    subscribe: (callback: () => void) => {
+      listeners.push(callback);
+      return () => {
+        listeners = listeners.filter((listener) => listener !== callback);
+      };
+    },
+    getSnapshot: () => {
+      try {
+        return localStorage.getItem(lsKey) || emptyModel;
+      } catch (error) {
+        return emptyModel;
+      }
+    },
+
+    getServerSnapshot: () => {
+      return emptyModel;
+    },
+
+    update: (filterModel: GridFilterModel) => {
+      localStorage.setItem(lsKey, JSON.stringify(filterModel));
+      listeners.forEach((listener) => listener());
+    },
+  };
+};
+
+const usePersistedFilterModel = () => {
+  const [filterModelStore] = React.useState(createFilterModelStore);
+
+  const filterModelString = React.useSyncExternalStore(
+    filterModelStore.subscribe,
+    filterModelStore.getSnapshot,
+    filterModelStore.getServerSnapshot,
+  );
+
+  const filterModel = React.useMemo(() => {
+    try {
+      return (JSON.parse(filterModelString) as GridFilterModel) || undefined;
+    } catch (error) {
+      return undefined;
+    }
+  }, [filterModelString]);
+
+  return React.useMemo(
+    () => [filterModel, filterModelStore.update] as const,
+    [filterModel, filterModelStore.update],
+  );
+};
+
+export default function FilteringLocalStorage() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  const [filterModel, setFilterModel] = usePersistedFilterModel();
+
+  const onFilterModelChange = React.useCallback<
+    NonNullable<DataGridProps['onFilterModelChange']>
+  >(
+    (newFilterModel) => {
+      setFilterModel(newFilterModel);
+    },
+    [setFilterModel],
+  );
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        slots={{ toolbar: GridToolbar }}
+        filterModel={filterModel}
+        onFilterModelChange={onFilterModelChange}
+      />
+    </div>
+  );
+}

docs/data/data-grid/filtering-recipes/FilteringLocalStorage.tsx.preview

@@ -0,0 +1,6 @@
+<DataGrid
+  {...data}
+  slots={{ toolbar: GridToolbar }}
+  filterModel={filterModel}
+  onFilterModelChange={onFilterModelChange}
+/>

docs/data/data-grid/filtering-recipes/filtering-recipes.md

@@ -6,6 +6,14 @@ title: Data Grid - Filtering customization recipes
 
 <p class="description">Advanced filtering customization recipes.</p>
 
+## Persisting filters in local storage
+
+You can persist the filters in the local storage to keep the filters applied after the page is reloaded.
+
+In the demo below, the [`React.useSyncExternalStore` hook](https://react.dev/reference/react/useSyncExternalStore) is used to synchronize the filters with the local storage.
+
+{{"demo": "FilteringLocalStorage.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Quick filter outside of the grid
 
 The [Quick Filter](/x/react-data-grid/filtering/quick-filter/) component is typically used in the Data Grid's Toolbar component slot.

docs/data/data-grid/localization/data.json

@@ -59,7 +59,7 @@
     "languageTag": "cs-CZ",
     "importName": "csCZ",
     "localeName": "Czech",
-    "missingKeysCount": 4,
+    "missingKeysCount": 0,
     "totalKeysCount": 118,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/csCZ.ts"
   },
@@ -275,7 +275,7 @@
     "languageTag": "vi-VN",
     "importName": "viVN",
     "localeName": "Vietnamese",
-    "missingKeysCount": 4,
+    "missingKeysCount": 0,
     "totalKeysCount": 118,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/viVN.ts"
   }

docs/data/data-grid/pagination/CursorPaginationGrid.js

@@ -110,7 +110,7 @@ export default function CursorPaginationGrid() {
           aria-labelledby="demo-cursor-pagination-buttons-group-label"
           name="cursor-pagination-buttons-group"
           value={rowCountType}
-          onChange={(e) => setRowCountType(e.target.value)}
+          onChange={(event) => setRowCountType(event.target.value)}
         >
           <FormControlLabel value="known" control={<Radio />} label="Known" />
           <FormControlLabel value="unknown" control={<Radio />} label="Unknown" />

docs/data/data-grid/pagination/CursorPaginationGrid.tsx

@@ -117,7 +117,7 @@ export default function CursorPaginationGrid() {
           aria-labelledby="demo-cursor-pagination-buttons-group-label"
           name="cursor-pagination-buttons-group"
           value={rowCountType}
-          onChange={(e) => setRowCountType(e.target.value as RowCountType)}
+          onChange={(event) => setRowCountType(event.target.value as RowCountType)}
         >
           <FormControlLabel value="known" control={<Radio />} label="Known" />
           <FormControlLabel value="unknown" control={<Radio />} label="Unknown" />

docs/data/data-grid/server-side-data/ServerSideErrorHandling.js

@@ -98,7 +98,7 @@ export default function ServerSideErrorHandling() {
           control={
             <Checkbox
               checked={shouldRequestsFail}
-              onChange={(e) => setShouldRequestsFail(e.target.checked)}
+              onChange={(event) => setShouldRequestsFail(event.target.checked)}
             />
           }
           label="Make the requests fail"

docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx

@@ -104,7 +104,7 @@ export default function ServerSideErrorHandling() {
           control={
             <Checkbox
               checked={shouldRequestsFail}
-              onChange={(e) => setShouldRequestsFail(e.target.checked)}
+              onChange={(event) => setShouldRequestsFail(event.target.checked)}
             />
           }
           label="Make the requests fail"

docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js

@@ -78,7 +78,7 @@ export default function ServerSideTreeDataErrorHandling() {
           control={
             <Checkbox
               checked={shouldRequestsFail}
-              onChange={(e) => setShouldRequestsFail(e.target.checked)}
+              onChange={(event) => setShouldRequestsFail(event.target.checked)}
             />
           }
           label="Make the requests fail"

docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx

@@ -83,7 +83,7 @@ export default function ServerSideTreeDataErrorHandling() {
           control={
             <Checkbox
               checked={shouldRequestsFail}
-              onChange={(e) => setShouldRequestsFail(e.target.checked)}
+              onChange={(event) => setShouldRequestsFail(event.target.checked)}
             />
           }
           label="Make the requests fail"

docs/data/data-grid/server-side-data/index.md

@@ -87,7 +87,7 @@ Let's take a look at the minimal `GridDataSource` interface configuration.
 ```tsx
 interface GridDataSource {
   /**
-   * This method will be called when the grid needs to fetch some rows
+   * This method will be called when the grid needs to fetch some rows.
    * @param {GridGetRowsParams} params The parameters required to fetch the rows
    * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse]
    */