[DataGrid] Add possibility of null in the return type of the `useGr…

…idApiRef()` hook (#16353) Signed-off-by: Armin Mehinovic <[email protected]>
mui · Jan 27, 2025 · 4ebe54a · 4ebe54a
1 parent 6b0c8f4
commit 4ebe54a
Show file tree

Hide file tree

Showing 150 changed files with 1,161 additions and 1,115 deletions.
diff --git a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.js b/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 }}>

diff --git a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx b/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 }}>

diff --git a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx.preview b/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 }}>

diff --git a/docs/data/data-grid/api-object/UseGridApiRef.js b/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">

diff --git a/docs/data/data-grid/api-object/UseGridApiRef.tsx b/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">

diff --git a/docs/data/data-grid/cell-selection/CellSelectionFormulaField.js b/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);
 

diff --git a/docs/data/data-grid/cell-selection/CellSelectionFormulaField.tsx b/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);
 

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js b/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>

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx b/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>

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js b/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,
         }),

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx b/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,
         }),

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js b/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%' }}>

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx b/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%' }}>

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js b/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]);

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx b/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]);

diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.js b/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]);

diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx b/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]);

diff --git a/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.js b/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 (

diff --git a/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx b/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 (

diff --git a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx b/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>>(

diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.js b/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.js
@@ -17,7 +17,7 @@ export default function ColumnSelectorGridSnap() {
   const apiRef = useGridApiRef();
 
   React.useEffect(() => {
-    apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+    apiRef.current?.showPreferences(GridPreferencePanelsValue.columns);
   }, [apiRef]);
 
   return (

diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx b/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx
@@ -17,7 +17,7 @@ export default function ColumnSelectorGridSnap() {
   const apiRef = useGridApiRef();
 
   React.useEffect(() => {
-    apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+    apiRef.current?.showPreferences(GridPreferencePanelsValue.columns);
   }, [apiRef]);
 
   return (

diff --git a/docs/data/data-grid/components/CustomColumnMenu.js b/docs/data/data-grid/components/CustomColumnMenu.js
@@ -83,7 +83,7 @@ export default function CustomColumnMenu() {
         onClick={(event) => {
           event.stopPropagation();
           setColor((current) => (current === 'primary' ? 'secondary' : 'primary'));
-          apiRef.current.showColumnMenu('default');
+          apiRef.current?.showColumnMenu('default');
         }}
       >
         Toggle menu background

diff --git a/docs/data/data-grid/components/CustomColumnMenu.tsx b/docs/data/data-grid/components/CustomColumnMenu.tsx
@@ -92,7 +92,7 @@ export default function CustomColumnMenu() {
         onClick={(event) => {
           event.stopPropagation();
           setColor((current) => (current === 'primary' ? 'secondary' : 'primary'));
-          apiRef.current.showColumnMenu('default');
+          apiRef.current?.showColumnMenu('default');
         }}
       >
         Toggle menu background

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js
@@ -453,11 +453,14 @@ export default function PopularFeaturesDemo() {
 
   const onRowClick = React.useCallback(
     (params) => {
-      const rowNode = apiRef.current.getRowNode(params.id);
+      const rowNode = apiRef.current?.getRowNode(params.id);
       if (rowNode && rowNode.type === 'group') {
-        apiRef.current.setRowChildrenExpansion(params.id, !rowNode.childrenExpanded);
+        apiRef.current?.setRowChildrenExpansion(
+          params.id,
+          !rowNode.childrenExpanded,
+        );
       } else {
-        apiRef.current.toggleDetailPanel(params.id);
+        apiRef.current?.toggleDetailPanel(params.id);
       }
     },
     [apiRef],

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
@@ -474,11 +474,14 @@ export default function PopularFeaturesDemo() {
 
   const onRowClick = React.useCallback<GridEventListener<'rowClick'>>(
     (params) => {
-      const rowNode = apiRef.current.getRowNode(params.id);
+      const rowNode = apiRef.current?.getRowNode(params.id);
       if (rowNode && rowNode.type === 'group') {
-        apiRef.current.setRowChildrenExpansion(params.id, !rowNode.childrenExpanded);
+        apiRef.current?.setRowChildrenExpansion(
+          params.id,
+          !rowNode.childrenExpanded,
+        );
       } else {
-        apiRef.current.toggleDetailPanel(params.id);
+        apiRef.current?.toggleDetailPanel(params.id);
       }
     },
     [apiRef],

diff --git a/docs/data/data-grid/events/SubscribeToEventsApiRef.js b/docs/data/data-grid/events/SubscribeToEventsApiRef.js
@@ -16,7 +16,7 @@ export default function SubscribeToEventsApiRef() {
     };
 
     // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`.
-    return apiRef.current.subscribeEvent('rowClick', handleRowClick);
+    return apiRef.current?.subscribeEvent('rowClick', handleRowClick);
   }, [apiRef]);
 
   return (

diff --git a/docs/data/data-grid/events/SubscribeToEventsApiRef.tsx b/docs/data/data-grid/events/SubscribeToEventsApiRef.tsx
@@ -16,7 +16,7 @@ export default function SubscribeToEventsApiRef() {
     };
 
     // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`.
-    return apiRef.current.subscribeEvent('rowClick', handleRowClick);
+    return apiRef.current?.subscribeEvent('rowClick', handleRowClick);
   }, [apiRef]);
 
   return (

diff --git a/docs/data/data-grid/filtering-recipes/FilteredRowCount.js b/docs/data/data-grid/filtering-recipes/FilteredRowCount.js
@@ -45,7 +45,12 @@ export default function FilteredRowCount() {
 
   const getFilteredRowsCount = React.useCallback(
     (filterModel) => {
-      const { filteredRowsLookup } = apiRef.current.getFilterState(filterModel);
+      const filterState = apiRef.current?.getFilterState(filterModel);
+      if (!filterState) {
+        return 0;
+      }
+
+      const { filteredRowsLookup } = filterState;
       return Object.keys(filteredRowsLookup).filter(
         (rowId) => filteredRowsLookup[rowId] === true,
       ).length;
@@ -72,7 +77,7 @@ export default function FilteredRowCount() {
           return (
             <Button
               key={label}
-              onClick={() => apiRef.current.setFilterModel(filterModel)}
+              onClick={() => apiRef.current?.setFilterModel(filterModel)}
               variant="outlined"
             >
               {label} {count !== undefined ? `(${count})` : ''}

diff --git a/docs/data/data-grid/filtering-recipes/FilteredRowCount.tsx b/docs/data/data-grid/filtering-recipes/FilteredRowCount.tsx
@@ -45,7 +45,12 @@ export default function FilteredRowCount() {
 
   const getFilteredRowsCount = React.useCallback(
     (filterModel: GridFilterModel) => {
-      const { filteredRowsLookup } = apiRef.current.getFilterState(filterModel);
+      const filterState = apiRef.current?.getFilterState(filterModel);
+      if (!filterState) {
+        return 0;
+      }
+
+      const { filteredRowsLookup } = filterState;
       return Object.keys(filteredRowsLookup).filter(
         (rowId) => filteredRowsLookup[rowId] === true,
       ).length;
@@ -72,7 +77,7 @@ export default function FilteredRowCount() {
           return (
             <Button
               key={label}
-              onClick={() => apiRef.current.setFilterModel(filterModel)}
+              onClick={() => apiRef.current?.setFilterModel(filterModel)}
               variant="outlined"
             >
               {label} {count !== undefined ? `(${count})` : ''}

diff --git a/docs/data/data-grid/filtering/MultiFilteringPanelSnap.js b/docs/data/data-grid/filtering/MultiFilteringPanelSnap.js
@@ -16,7 +16,7 @@ export default function MultiFilteringPanelSnap() {
   const apiRef = useGridApiRef();
 
   useEnhancedEffect(() => {
-    apiRef.current.showFilterPanel();
+    apiRef.current?.showFilterPanel();
   }, [apiRef]);
 
   return (