Merge remote-tracking branch 'upstream/master' into radar-chart

Author: alexfauquette

.circleci/config.yml

@@ -253,7 +253,7 @@ jobs:
   test_browser:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.1-noble
+      - image: mcr.microsoft.com/playwright:v1.50.0-noble
     steps:
       - checkout
       - install_js:
@@ -285,7 +285,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.1-noble
+      - image: mcr.microsoft.com/playwright:v1.50.0-noble
     steps:
       - checkout
       - install_js:
@@ -297,7 +297,7 @@ jobs:
   test_e2e_website:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.1-noble
+      - image: mcr.microsoft.com/playwright:v1.50.0-noble
     steps:
       - checkout
       - install_js:
@@ -310,7 +310,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.49.1-noble
+      - image: mcr.microsoft.com/playwright:v1.50.0-noble
     steps:
       - checkout
       - install_js:

docs/data/charts/bars/BorderRadius.js

@@ -78,7 +78,7 @@ const chartSettingsH = {
   slotProps: {
     legend: {
       direction: 'horizontal',
-      position: { vertical: 'bottom', horizontal: 'middle' },
+      position: { vertical: 'bottom', horizontal: 'center' },
     },
   },
 };

docs/data/charts/bars/BorderRadius.tsx

@@ -80,7 +80,7 @@ const chartSettingsH: Partial<BarChartProps> = {
   slotProps: {
     legend: {
       direction: 'horizontal',
-      position: { vertical: 'bottom', horizontal: 'middle' },
+      position: { vertical: 'bottom', horizontal: 'center' },
     },
   },
 };

docs/data/charts/highlighting/ControlledHighlight.js

@@ -32,6 +32,7 @@ export default function ControlledHighlight() {
 
   const handleHighLightedItem = (event) => {
     setHighLightedItem((prev) => ({
+      seriesId: 'A',
       ...prev,
       dataIndex: Number(event.target.value),
     }));

docs/data/charts/highlighting/ControlledHighlight.tsx

@@ -33,6 +33,7 @@ export default function ControlledHighlight() {
 
   const handleHighLightedItem = (event: any) => {
     setHighLightedItem((prev) => ({
+      seriesId: 'A',
       ...prev,
       dataIndex: Number(event.target.value),
     }));

docs/data/charts/legend/LegendPositionNoSnap.js

@@ -42,8 +42,8 @@ export default function LegendPositionNoSnap() {
         {
           propName: 'horizontal',
           knob: 'select',
-          defaultValue: 'middle',
-          options: ['left', 'middle', 'right'],
+          defaultValue: 'center',
+          options: ['start', 'center', 'end'],
         },
         {
           propName: 'itemsNumber',
@@ -54,7 +54,7 @@ export default function LegendPositionNoSnap() {
         },
       ]}
       renderDemo={(
-        /** @type {{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "left" | "middle" | "right"; }} */
+        /** @type {{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "start" | "center" | "end"; }} */
         props,
       ) => (
         <PieChart
@@ -74,7 +74,7 @@ export default function LegendPositionNoSnap() {
         />
       )}
       getCode={(
-        /** @type {{props:{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "left" | "middle" | "right";}}} */
+        /** @type {{props:{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "start" | "center" | "end";}}} */
         { props },
       ) => {
         return `

docs/data/charts/scatter/scatter.md

@@ -11,7 +11,8 @@ components: ScatterChart, ScatterChartPro, ScatterPlot, ChartsVoronoiHandler, Ch
 ## Basics
 
 Scatter chart series should contain a `data` property containing an array of objects.
-Those objects require `x`, `y`, and `id` properties.
+Those objects require the `x` and `y` properties.
+With an optional `id` property if more optimization is needed.
 
 {{"demo": "BasicScatter.js"}}
 
@@ -22,8 +23,8 @@ It accepts an array of objects such as `dataset={[{a: 1, b: 32, c: 873}, {a: 2,
 
 You can reuse this data when defining the series.
 The scatter series work a bit differently than in other charts.
-You need to specify the `datasetKeys` properties which is an object that requires `x`, `y`, and `id` keys.
-With an optional `z` key if needed.
+You need to specify the `datasetKeys` properties which is an object that requires the `x` and `y` keys.
+With an optional `id` and `z` keys if needed.
 
 {{"demo": "ScatterDataset.js"}}
 

docs/data/charts/styling/ColorTemplate.js

@@ -30,7 +30,7 @@ const legendPlacement = {
     legend: {
       position: {
         vertical: 'middle',
-        horizontal: 'right',
+        horizontal: 'end',
       },
       direction: 'vertical',
     },

docs/data/charts/styling/ColorTemplate.tsx

@@ -34,7 +34,7 @@ const legendPlacement: Partial<ScatterChartProps> = {
     legend: {
       position: {
         vertical: 'middle',
-        horizontal: 'right',
+        horizontal: 'end',
       },
       direction: 'vertical',
     },

docs/data/data-grid/api-object/AccessDisabledColumnFeatures.js

@@ -38,13 +38,13 @@ export default function AccessDisabledColumnFeatures() {
 
   return (
     <div style={{ width: '100%' }}>
-      <Button onClick={() => apiRef.current.sortColumn('firstName', 'asc')}>
+      <Button onClick={() => apiRef.current?.sortColumn('firstName', 'asc')}>
         Sort by ASC
       </Button>
-      <Button onClick={() => apiRef.current.sortColumn('firstName', 'desc')}>
+      <Button onClick={() => apiRef.current?.sortColumn('firstName', 'desc')}>
         Sort by DESC
       </Button>
-      <Button onClick={() => apiRef.current.sortColumn('firstName', null)}>
+      <Button onClick={() => apiRef.current?.sortColumn('firstName', null)}>
         Remove sort
       </Button>
       <Box sx={{ height: 400 }}>

docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx

@@ -38,13 +38,13 @@ export default function AccessDisabledColumnFeatures() {
 
   return (
     <div style={{ width: '100%' }}>
-      <Button onClick={() => apiRef.current.sortColumn('firstName', 'asc')}>
+      <Button onClick={() => apiRef.current?.sortColumn('firstName', 'asc')}>
         Sort by ASC
       </Button>
-      <Button onClick={() => apiRef.current.sortColumn('firstName', 'desc')}>
+      <Button onClick={() => apiRef.current?.sortColumn('firstName', 'desc')}>
         Sort by DESC
       </Button>
-      <Button onClick={() => apiRef.current.sortColumn('firstName', null)}>
+      <Button onClick={() => apiRef.current?.sortColumn('firstName', null)}>
         Remove sort
       </Button>
       <Box sx={{ height: 400 }}>

docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx.preview

@@ -1,10 +1,10 @@
-<Button onClick={() => apiRef.current.sortColumn('firstName', 'asc')}>
+<Button onClick={() => apiRef.current?.sortColumn('firstName', 'asc')}>
   Sort by ASC
 </Button>
-<Button onClick={() => apiRef.current.sortColumn('firstName', 'desc')}>
+<Button onClick={() => apiRef.current?.sortColumn('firstName', 'desc')}>
   Sort by DESC
 </Button>
-<Button onClick={() => apiRef.current.sortColumn('firstName', null)}>
+<Button onClick={() => apiRef.current?.sortColumn('firstName', null)}>
   Remove sort
 </Button>
 <Box sx={{ height: 400 }}>

docs/data/data-grid/api-object/UseGridApiRef.js

@@ -19,7 +19,7 @@ export default function UseGridApiRef() {
 
   const apiRef = useGridApiRef();
 
-  const handleGoToPage1 = () => apiRef.current.setPage(1);
+  const handleGoToPage1 = () => apiRef.current?.setPage(1);
 
   return (
     <Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">

docs/data/data-grid/api-object/UseGridApiRef.tsx

@@ -19,7 +19,7 @@ export default function UseGridApiRef() {
 
   const apiRef = useGridApiRef();
 
-  const handleGoToPage1 = () => apiRef.current.setPage(1);
+  const handleGoToPage1 = () => apiRef.current?.setPage(1);
 
   return (
     <Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">

docs/data/data-grid/cell-selection/CellSelectionFormulaField.js

@@ -29,7 +29,7 @@ export default function CellSelectionFormulaField() {
     const updates = [];
 
     Object.entries(cellSelectionModel).forEach(([id, fields]) => {
-      const updatedRow = { ...apiRef.current.getRow(id) };
+      const updatedRow = { ...apiRef.current?.getRow(id) };
 
       Object.entries(fields).forEach(([field, isSelected]) => {
         if (isSelected) {
@@ -40,10 +40,14 @@ export default function CellSelectionFormulaField() {
       updates.push(updatedRow);
     });
 
-    apiRef.current.updateRows(updates);
+    apiRef.current?.updateRows(updates);
   }, [apiRef, cellSelectionModel, value]);
 
   React.useEffect(() => {
+    if (apiRef.current === null) {
+      return;
+    }
+
     const selectedCells = apiRef.current.getSelectedCellsAsArray();
     setNumberOfSelectedCells(selectedCells.length);
 

docs/data/data-grid/cell-selection/CellSelectionFormulaField.tsx

@@ -41,7 +41,7 @@ export default function CellSelectionFormulaField() {
     const updates: GridRowModelUpdate[] = [];
 
     Object.entries(cellSelectionModel).forEach(([id, fields]) => {
-      const updatedRow = { ...apiRef.current.getRow(id) };
+      const updatedRow = { ...apiRef.current?.getRow(id) };
 
       Object.entries(fields).forEach(([field, isSelected]) => {
         if (isSelected) {
@@ -52,10 +52,14 @@ export default function CellSelectionFormulaField() {
       updates.push(updatedRow);
     });
 
-    apiRef.current.updateRows(updates);
+    apiRef.current?.updateRows(updates);
   }, [apiRef, cellSelectionModel, value]);
 
   React.useEffect(() => {
+    if (apiRef.current === null) {
+      return;
+    }
+
     const selectedCells = apiRef.current.getSelectedCellsAsArray();
     setNumberOfSelectedCells(selectedCells.length);
 

docs/data/data-grid/column-dimensions/ColumnAutosizing.js

@@ -87,7 +87,7 @@ export default function ColumnAutosizing() {
       >
         <Button
           variant="outlined"
-          onClick={() => apiRef.current.autosizeColumns(autosizeOptions)}
+          onClick={() => apiRef.current?.autosizeColumns(autosizeOptions)}
         >
           Autosize columns
         </Button>

docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx

@@ -86,7 +86,7 @@ export default function ColumnAutosizing() {
       >
         <Button
           variant="outlined"
-          onClick={() => apiRef.current.autosizeColumns(autosizeOptions)}
+          onClick={() => apiRef.current?.autosizeColumns(autosizeOptions)}
         >
           Autosize columns
         </Button>

docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js

@@ -62,14 +62,14 @@ export default function ColumnAutosizingAsync() {
       .then((data) => {
         ReactDOM.flushSync(() => {
           setIsLoading(false);
-          apiRef.current.updateRows(data.rows);
+          apiRef.current?.updateRows(data.rows);
         });
       })
       // `sleep`/`setTimeout` is required because `.updateRows` is an
       // async function throttled to avoid choking on frequent changes.
       .then(() => sleep(0))
       .then(() =>
-        apiRef.current.autosizeColumns({
+        apiRef.current?.autosizeColumns({
           includeHeaders: true,
           includeOutliers: true,
         }),

docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx

@@ -62,14 +62,14 @@ export default function ColumnAutosizingAsync() {
       .then((data) => {
         ReactDOM.flushSync(() => {
           setIsLoading(false);
-          apiRef.current.updateRows(data.rows);
+          apiRef.current?.updateRows(data.rows);
         });
       })
       // `sleep`/`setTimeout` is required because `.updateRows` is an
       // async function throttled to avoid choking on frequent changes.
       .then(() => sleep(0))
       .then(() =>
-        apiRef.current.autosizeColumns({
+        apiRef.current?.autosizeColumns({
           includeHeaders: true,
           includeOutliers: true,
         }),

docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js

@@ -42,7 +42,7 @@ export default function ColumnAutosizingDynamicRowHeight() {
 
   return (
     <div style={{ width: '100%' }}>
-      <Button onClick={() => apiRef.current.autosizeColumns(autosizeOptions)}>
+      <Button onClick={() => apiRef.current?.autosizeColumns(autosizeOptions)}>
         Autosize Columns
       </Button>
       <div style={{ height: 400, width: '100%' }}>

docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx

@@ -48,7 +48,7 @@ export default function ColumnAutosizingDynamicRowHeight() {
 
   return (
     <div style={{ width: '100%' }}>
-      <Button onClick={() => apiRef.current.autosizeColumns(autosizeOptions)}>
+      <Button onClick={() => apiRef.current?.autosizeColumns(autosizeOptions)}>
         Autosize Columns
       </Button>
       <div style={{ height: 400, width: '100%' }}>

docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js

@@ -20,9 +20,9 @@ export default function ColumnAutosizingGroupedRows() {
   });
 
   React.useEffect(() => {
-    return apiRef.current.subscribeEvent('rowExpansionChange', (params) => {
+    return apiRef.current?.subscribeEvent('rowExpansionChange', (params) => {
       if (params.childrenExpanded) {
-        apiRef.current.autosizeColumns({ includeOutliers: true });
+        apiRef.current?.autosizeColumns({ includeOutliers: true });
       }
     });
   }, [apiRef]);

docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx

@@ -20,9 +20,9 @@ export default function ColumnAutosizingGroupedRows() {
   });
 
   React.useEffect(() => {
-    return apiRef.current.subscribeEvent('rowExpansionChange', (params) => {
+    return apiRef.current?.subscribeEvent('rowExpansionChange', (params) => {
       if (params.childrenExpanded) {
-        apiRef.current.autosizeColumns({ includeOutliers: true });
+        apiRef.current?.autosizeColumns({ includeOutliers: true });
       }
     });
   }, [apiRef]);

docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.js

@@ -34,7 +34,7 @@ export default function ColumnMenuGridPremiumSnap() {
   React.useEffect(() => {
     // To avoid an issue around Popper being open before the ref is set.
     Promise.resolve().then(() => {
-      apiRef.current.showColumnMenu('gross');
+      apiRef.current?.showColumnMenu('gross');
       console.log('after showColumnMenu');
     });
   }, [apiRef]);

docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx

@@ -34,7 +34,7 @@ export default function ColumnMenuGridPremiumSnap() {
   React.useEffect(() => {
     // To avoid an issue around Popper being open before the ref is set.
     Promise.resolve().then(() => {
-      apiRef.current.showColumnMenu('gross');
+      apiRef.current?.showColumnMenu('gross');
       console.log('after showColumnMenu');
     });
   }, [apiRef]);

docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.js

@@ -66,7 +66,7 @@ export default function ColumnPinningDynamicRowHeight() {
   }, []);
 
   React.useLayoutEffect(() => {
-    apiRef.current.resetRowHeights();
+    apiRef.current?.resetRowHeights();
   }, [apiRef, showEditDelete]);
 
   return (

docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx

@@ -71,7 +71,7 @@ export default function ColumnPinningDynamicRowHeight() {
   }, []);
 
   React.useLayoutEffect(() => {
-    apiRef.current.resetRowHeights();
+    apiRef.current?.resetRowHeights();
   }, [apiRef, showEditDelete]);
 
   return (

docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx

@@ -50,7 +50,7 @@ export default function ColumnSizingPersistWidthOrder() {
 }
 
 const useColumnsState = (
-  apiRef: React.RefObject<GridApiPro>,
+  apiRef: React.RefObject<GridApiPro | null>,
   columns: GridColDef[],
 ) => {
   const [widths, setWidths] = React.useState<Record<GridColDef['field'], number>>(