Merge branch 'master' into refactor-css-breaking-change

Author: romgrk

.mocharc.js

@@ -8,6 +8,7 @@ module.exports = {
     // We're leaving this to make sure.
     'docs/.next/**',
   ],
+  'node-option': ['no-experimental-detect-module'],
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',

docs/data/charts/line-demo/LiveLineChartNoSnap.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const dateFormatter = Intl.DateTimeFormat(undefined, {
+  month: '2-digit',
+  day: '2-digit',
+});
+const oneDay = 24 * 60 * 60 * 1000; // in milliseconds
+
+const length = 16;
+const firstDataSeed = randBetween(0, 5000);
+const secondDataSeed = randBetween(0, 5000);
+const initialFirstData = Array.from({ length }).map(
+  (_, __, array) => (array.at(-1) ?? firstDataSeed) + randBetween(-500, 500),
+);
+const initialSecondData = Array.from({ length }).map(
+  (_, __, array) => (array.at(-1) ?? secondDataSeed) + randBetween(-500, 500),
+);
+
+export default function LiveLineChartNoSnap() {
+  const [date, setDate] = React.useState(new Date(2000, 0, 0));
+  const [firstData, setFirstData] = React.useState(initialFirstData);
+  const [secondData, setSecondData] = React.useState(initialSecondData);
+
+  React.useEffect(() => {
+    const intervalId = setInterval(() => {
+      setDate((prev) => new Date(prev.getTime() + oneDay));
+      setFirstData((prev) => [
+        ...prev.slice(1),
+        prev.at(-1) + randBetween(-500, 500),
+      ]);
+      setSecondData((prev) => [
+        ...prev.slice(1),
+        prev.at(-1) + randBetween(-500, 500),
+      ]);
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <LineChart
+      height={300}
+      series={[{ data: secondData }, { data: firstData }]}
+      xAxis={[
+        {
+          scaleType: 'point',
+          data: Array.from({ length }).map(
+            (_, i) => new Date(date.getTime() + i * oneDay),
+          ),
+          valueFormatter: (value) => dateFormatter.format(value),
+        },
+      ]}
+      yAxis={[{ width: 50 }]}
+      margin={{ right: 24 }}
+    />
+  );
+}
+
+function randBetween(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}

docs/data/charts/line-demo/LiveLineChartNoSnap.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const dateFormatter = Intl.DateTimeFormat(undefined, {
+  month: '2-digit',
+  day: '2-digit',
+});
+const oneDay = 24 * 60 * 60 * 1000; // in milliseconds
+
+const length = 16;
+const firstDataSeed = randBetween(0, 5000);
+const secondDataSeed = randBetween(0, 5000);
+const initialFirstData = Array.from<number>({ length }).map(
+  (_, __, array) => (array.at(-1) ?? firstDataSeed) + randBetween(-500, 500),
+);
+const initialSecondData = Array.from<number>({ length }).map(
+  (_, __, array) => (array.at(-1) ?? secondDataSeed) + randBetween(-500, 500),
+);
+
+export default function LiveLineChartNoSnap() {
+  const [date, setDate] = React.useState(new Date(2000, 0, 0));
+  const [firstData, setFirstData] = React.useState(initialFirstData);
+  const [secondData, setSecondData] = React.useState(initialSecondData);
+
+  React.useEffect(() => {
+    const intervalId = setInterval(() => {
+      setDate((prev) => new Date(prev.getTime() + oneDay));
+      setFirstData((prev) => [
+        ...prev.slice(1),
+        prev.at(-1)! + randBetween(-500, 500),
+      ]);
+      setSecondData((prev) => [
+        ...prev.slice(1),
+        prev.at(-1)! + randBetween(-500, 500),
+      ]);
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <LineChart
+      height={300}
+      series={[{ data: secondData }, { data: firstData }]}
+      xAxis={[
+        {
+          scaleType: 'point',
+          data: Array.from({ length }).map(
+            (_, i) => new Date(date.getTime() + i * oneDay),
+          ),
+          valueFormatter: (value: Date) => dateFormatter.format(value),
+        },
+      ]}
+      yAxis={[{ width: 50 }]}
+      margin={{ right: 24 }}
+    />
+  );
+}
+
+function randBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}

docs/data/charts/line-demo/LiveLineChartNoSnap.tsx.preview

@@ -0,0 +1,15 @@
+<LineChart
+  height={300}
+  series={[{ data: secondData }, { data: firstData }]}
+  xAxis={[
+    {
+      scaleType: 'point',
+      data: Array.from({ length }).map(
+        (_, i) => new Date(date.getTime() + i * oneDay),
+      ),
+      valueFormatter: (value: Date) => dateFormatter.format(value),
+    },
+  ]}
+  yAxis={[{ width: 50 }]}
+  margin={{ right: 24 }}
+/>

docs/data/charts/line-demo/line-demo.md

@@ -32,6 +32,10 @@ components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, Lin
 
 {{"demo": "LineChartConnectNulls.js"}}
 
+## Line chart with live data
+
+{{"demo": "LiveLineChartNoSnap.js"}}
+
 ## Line with forecast
 
 To show that parts of the data have different meanings, you can render stylised lines for each of them.

docs/data/data-grid/components/CustomToolbarGrid.js

@@ -24,7 +24,7 @@ function CustomToolbar() {
       <GridToolbarExport
         slotProps={{
           tooltip: { title: 'Export data' },
-          button: { variant: 'outlined' },
+          button: { material: { variant: 'outlined' } },
         }}
       />
     </GridToolbarContainer>

docs/data/data-grid/components/CustomToolbarGrid.tsx

@@ -24,7 +24,7 @@ function CustomToolbar() {
       <GridToolbarExport
         slotProps={{
           tooltip: { title: 'Export data' },
-          button: { variant: 'outlined' },
+          button: { material: { variant: 'outlined' } },
         }}
       />
     </GridToolbarContainer>

docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.js

@@ -98,7 +98,7 @@ function CustomToolbar() {
                         edge="end"
                         size="small"
                         aria-label="Clear search"
-                        sx={{ marginRight: -0.75 }}
+                        material={{ sx: { marginRight: -0.75 } }}
                       >
                         <CancelIcon fontSize="small" />
                       </QuickFilterClear>

docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.tsx

@@ -106,7 +106,7 @@ function CustomToolbar() {
                         edge="end"
                         size="small"
                         aria-label="Clear search"
-                        sx={{ marginRight: -0.75 }}
+                        material={{ sx: { marginRight: -0.75 } }}
                       >
                         <CancelIcon fontSize="small" />
                       </QuickFilterClear>

docs/data/data-grid/components/quick-filter/GridPersistentQuickFilter.js

@@ -43,7 +43,7 @@ function CustomToolbar() {
                         edge="end"
                         size="small"
                         aria-label="Clear search"
-                        sx={{ marginRight: -0.75 }}
+                        material={{ sx: { marginRight: -0.75 } }}
                       >
                         <CancelIcon fontSize="small" />
                       </QuickFilterClear>