Changes from ref react-ts-codemod

Author: LukasTy

packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts

@@ -25,7 +25,7 @@ export type ChartContextValue<
   /**
    * The ref to the <svg />.
    */
-  svgRef: React.RefObject<SVGSVGElement>;
+  svgRef: React.RefObject<SVGSVGElement | null>;
 };
 
 // export interface ChartProviderProps<TSignatures extends readonly ChartAnyPluginSignature[]> {

packages/x-charts/src/context/SizeProvider/Size.types.ts

@@ -16,7 +16,7 @@ export interface SizeContextState extends Required<Pick<SizeProviderProps, 'heig
   /**
    * The ref of the svg element that the chart is rendered in.
    */
-  svgRef: React.RefObject<SVGSVGElement>;
+  svgRef: React.RefObject<SVGSVGElement | null>;
   /**
    * If the chart has a defined size.
    */

packages/x-charts/src/hooks/useSvgRef.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useChartContext } from '../context/ChartProvider';
 
-export function useSvgRef(): React.RefObject<SVGSVGElement> {
+export function useSvgRef(): React.RefObject<SVGSVGElement | null> {
   const context = useChartContext();
 
   if (!context) {

packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx

@@ -1499,9 +1499,11 @@ describe('<DataGridPro /> - Row editing', () => {
         }
       }, [hasFocus, inputRef]);
       return (
-        <Portal>
-          <input ref={(ref) => setInputRef(ref)} data-testid="input" />
-        </Portal>
+        (<Portal>
+          <input ref={ref => {
+            setInputRef(ref);
+          }} data-testid="input" />
+        </Portal>)
       );
     }
     const renderEditCell = (props: GridRenderEditCellParams) => (

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.types.ts

@@ -24,7 +24,7 @@ export type TreeViewContextValue<
     instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
     store: TreeViewStore<TSignatures>;
-    rootRef: React.RefObject<HTMLUListElement>;
+    rootRef: React.RefObject<HTMLUListElement | null>;
     wrapItem: TreeItemWrapper<TSignatures>;
     wrapRoot: TreeRootWrapper;
     runItemPlugins: TreeViewItemPluginsRunner;

packages/x-tree-view/src/internals/hooks/useInstanceEventHandler.ts

@@ -41,7 +41,7 @@ export function createUseInstanceEventHandler(registryContainer: RegistryContain
     const subscription = React.useRef<(() => void) | null>(null);
     const handlerRef = React.useRef<
       TreeViewEventListener<TreeViewUsedEvents<Signature>[E]> | undefined
-    >();
+    >(undefined);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef<UnregisterToken | null>(null);
 

packages/x-tree-view/src/useTreeItem/useTreeItem.types.ts

@@ -96,7 +96,7 @@ export type UseTreeItemLabelInputSlotProps<ExternalProps = {}> = ExternalProps &
   UseTreeItemLabelInputSlotOwnProps;
 
 export interface UseTreeItemCheckboxSlotOwnProps {
-  ref: React.RefObject<HTMLButtonElement>;
+  ref: React.RefObject<HTMLButtonElement | null>;
 }
 
 export type UseTreeItemCheckboxSlotProps<ExternalProps = {}> = ExternalProps &