Merge branch 'master' into useTreeViewFocus-describeTreeView

CHANGELOG.md

@@ -3,6 +3,81 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.3.0
+
+_Apr 18, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📄 Support [unknown and estimated row count in server-side pagination](https://mui.com/x/react-data-grid/pagination/#index-based-pagination) (#12490) @MBilalShafi
+- 🎨 Support color scales in Charts (#12490) @alexfauquette
+  Add a [`colorMap` configuration](https://mui.com/x/react-charts/styling/#values-color) to an axis, and the chart will use it to select colors.
+  Each impacted chart ([bar charts](https://mui.com/x/react-charts/bars/#color-scale), [line charts](https://mui.com/x/react-charts/lines/#color-scale), [scatter charts](https://mui.com/x/react-charts/scatter/#color-scale)) has a dedicated section explaining how this color map is impacting it.
+
+  <img src="https://github.com/mui/mui-x/assets/45398769/f0066606-3486-4c4e-b3be-7fdd56d763c3" alt="scatter chart with gradient along y-axis" />
+
+- 🌍 Improve Danish (da-DK) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Fix calling `onCellEditStop` on error (#12747) @sai6855
+- [DataGrid] Fix column resize (#12792) @romgrk
+- [DataGrid] Fix column separators (#12808) @romgrk
+- [DataGrid] Limit panel width to not exceed screen width (#12799) @cherniavskii
+- [DataGrid] Support advanced server-side pagination use cases (#12474) @MBilalShafi
+- [DataGrid] Support state export and restore on grid density (#12671) @MBilalShafi
+- [l10n] Improve Danish (da-DK) locale (#12784) @EmilBahnsen
+
+#### `@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] Implement header filter height (#12666) @romgrk
+
+#### `@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]`.
+
+### Charts
+
+#### Breaking change
+
+A typo fix:
+
+```diff
+- ContinuouseScaleName
++ ContinuousScaleName
+```
+
+#### `@mui/[email protected]`
+
+- [charts] Add `dataIndex` to series `valueFormatter` (#12745) @JCQuintas
+- [charts] Add color scale (#12490) @alexfauquette
+- [charts] Do not document the usage of `DEFAULT_X_AXIS_KEY` and `DEFAULT_Y_AXIS_KEY` (#12780) @alexfauquette
+- [charts] Export more utils (#12744) @alexfauquette
+- [charts] Fix passing slot props down to `PieArcLabel` (#12806) @JCQuintas
+
+### Tree View
+
+#### `@mui/[email protected]`
+
+- [TreeView] Support `defaultMuiPrevented` on the `onFocus` prop of the root slot (#12813) @flaviendelangle
+
+### Docs
+
+- [docs] Add grid cell display example to the migration guide (#12793) @romgrk
+- [docs] Use charts classes objects (#12781) @alexfauquette
+- [docs] Fix layout shift on demos (#12816) @zanivan
+- [test] Increase timeout for test that sometimes fail on `DateTimeRangePicker` (#12786) @LukasTy
+
+### Core
+
+- [docs-infra] Prepare infra to document charts interfaces (#12653) @alexfauquette
+
 ## 7.2.0
 
 _Apr 12, 2024_
@@ -3058,6 +3133,56 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.11
+
+_Apr 18, 2024_
+
+We'd like to offer a big thanks to the 1 contributor who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Fix virtualization memory leak (#12812) @romgrk
+
+#### `@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]`.
+
+#### `@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]`.
+
+## 6.19.10
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12734) @cherniavskii
+- [DataGrid] Fix bug in suspense (#12754) @cherniavskii
+
+#### `@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]`.
+
+#### `@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]`.
+
+### Core
+
+- [core] Update the docs release source branch (#12685) @LukasTy
+
 ## 6.19.9
 
 _Apr 5, 2024_

docs/data/data-grid/events/events.json

@@ -254,6 +254,13 @@
     "event": "MuiEvent<{}>",
     "componentProp": "onMenuOpen"
   },
+  {
+    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
+    "name": "paginationMetaChange",
+    "description": "Fired when the pagination meta change.",
+    "params": "GridPaginationMeta",
+    "event": "MuiEvent<{}>"
+  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "paginationModelChange",

docs/data/data-grid/localization/localization.md

@@ -24,7 +24,7 @@ One example is the table pagination component used in the Data Grid footer when
   localeText={{
     MuiTablePagination: {
       labelDisplayedRows: ({ from, to, count }) =>
-        `${from} - ${to} of more than ${count}`,
+        `${from} - ${to} of ${count === -1 ? `more than ${to}` : count}`,
     },
   }}
 />

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
 import { createFakeServer } from '@mui/x-data-grid-generator';
 
 const PAGE_SIZE = 5;
@@ -11,6 +16,8 @@ const SERVER_OPTIONS = {
 const { useQuery, ...data } = createFakeServer({}, SERVER_OPTIONS);
 
 export default function CursorPaginationGrid() {
+  const [rowCountType, setRowCountType] = React.useState('known');
+
   const mapPageToNextCursor = React.useRef({});
 
   const [paginationModel, setPaginationModel] = React.useState({
@@ -25,7 +32,11 @@ export default function CursorPaginationGrid() {
     }),
     [paginationModel],
   );
-  const { isLoading, rows, pageInfo } = useQuery(queryOptions);
+  const {
+    isLoading,
+    rows,
+    pageInfo: { hasNextPage, nextCursor, totalRowCount },
+  } = useQuery(queryOptions);
 
   const handlePaginationModelChange = (newPaginationModel) => {
     // We have the cursor, we can allow the page transition.
@@ -37,38 +48,94 @@ export default function CursorPaginationGrid() {
     }
   };
 
+  const paginationMetaRef = React.useRef();
+
+  // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
+  const paginationMeta = React.useMemo(() => {
+    if (
+      hasNextPage !== undefined &&
+      paginationMetaRef.current?.hasNextPage !== hasNextPage
+    ) {
+      paginationMetaRef.current = { hasNextPage };
+    }
+    return paginationMetaRef.current;
+  }, [hasNextPage]);
+
   React.useEffect(() => {
-    if (!isLoading && pageInfo?.nextCursor) {
+    if (!isLoading && nextCursor) {
       // We add nextCursor when available
-      mapPageToNextCursor.current[paginationModel.page] = pageInfo?.nextCursor;
+      mapPageToNextCursor.current[paginationModel.page] = nextCursor;
     }
-  }, [paginationModel.page, isLoading, pageInfo?.nextCursor]);
+  }, [paginationModel.page, isLoading, nextCursor]);
 
   // Some API clients return undefined while loading
   // Following lines are here to prevent `rowCountState` from being undefined during the loading
-  const [rowCountState, setRowCountState] = React.useState(
-    pageInfo?.totalRowCount || 0,
-  );
+  const [rowCountState, setRowCountState] = React.useState(totalRowCount || 0);
   React.useEffect(() => {
-    setRowCountState((prevRowCountState) =>
-      pageInfo?.totalRowCount !== undefined
-        ? pageInfo?.totalRowCount
-        : prevRowCountState,
-    );
-  }, [pageInfo?.totalRowCount, setRowCountState]);
+    if (rowCountType === 'known') {
+      setRowCountState((prevRowCountState) =>
+        totalRowCount !== undefined ? totalRowCount : prevRowCountState,
+      );
+    }
+    if (
+      (rowCountType === 'unknown' || rowCountType === 'estimated') &&
+      paginationMeta?.hasNextPage !== false
+    ) {
+      setRowCountState(-1);
+    }
+  }, [paginationMeta?.hasNextPage, rowCountType, totalRowCount]);
+
+  const prevEstimatedRowCount = React.useRef(undefined);
+  const estimatedRowCount = React.useMemo(() => {
+    if (rowCountType === 'estimated') {
+      if (totalRowCount !== undefined) {
+        if (prevEstimatedRowCount.current === undefined) {
+          prevEstimatedRowCount.current = totalRowCount / 2;
+        }
+        return totalRowCount / 2;
+      }
+      return prevEstimatedRowCount.current;
+    }
+    return undefined;
+  }, [rowCountType, totalRowCount]);
 
   return (
-    <div style={{ height: 400, width: '100%' }}>
-      <DataGrid
-        rows={rows}
-        {...data}
-        pageSizeOptions={[PAGE_SIZE]}
-        rowCount={rowCountState}
-        paginationMode="server"
-        onPaginationModelChange={handlePaginationModelChange}
-        paginationModel={paginationModel}
-        loading={isLoading}
-      />
+    <div style={{ width: '100%' }}>
+      <FormControl>
+        <FormLabel id="demo-cursor-pagination-buttons-group-label">
+          Row count
+        </FormLabel>
+        <RadioGroup
+          row
+          aria-labelledby="demo-cursor-pagination-buttons-group-label"
+          name="cursor-pagination-buttons-group"
+          value={rowCountType}
+          onChange={(e) => setRowCountType(e.target.value)}
+        >
+          <FormControlLabel value="known" control={<Radio />} label="Known" />
+          <FormControlLabel value="unknown" control={<Radio />} label="Unknown" />
+          <FormControlLabel
+            value="estimated"
+            control={<Radio />}
+            label="Estimated"
+          />
+        </RadioGroup>
+      </FormControl>
+      <div style={{ height: 400 }}>
+        <DataGrid
+          rows={rows}
+          {...data}
+          pageSizeOptions={[PAGE_SIZE]}
+          rowCount={rowCountState}
+          onRowCountChange={(newRowCount) => setRowCountState(newRowCount)}
+          estimatedRowCount={estimatedRowCount}
+          paginationMeta={paginationMeta}
+          paginationMode="server"
+          onPaginationModelChange={handlePaginationModelChange}
+          paginationModel={paginationModel}
+          loading={isLoading}
+        />
+      </div>
     </div>
   );
 }