fix type errors

public/app/features/alerting/unified/rule-list/filter/SavedSearches.tsx

@@ -387,7 +387,7 @@ interface ListModeProps {
   hasSearches: boolean;
   canSave: boolean;
   activeAction: ActiveAction;
-  saveButtonRef: React.RefObject<HTMLButtonElement>;
+  saveButtonRef: React.RefObject<HTMLButtonElement | null>;
   isLoading: boolean;
   onStartSave: () => void;
   /** Callback to complete save. Throws ValidationError on validation failure. */

public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemRenderer.tsx

@@ -15,7 +15,7 @@ import { DashboardGridItem, RepeatDirection } from './DashboardGridItem';
 interface PanelWrapperProps {
   panel: VizPanel;
   isLazy: boolean;
-  containerRef?: RefObject<HTMLDivElement>;
+  containerRef?: RefObject<HTMLDivElement | null>;
 }
 
 function PanelWrapper({ panel, isLazy, containerRef }: PanelWrapperProps) {

public/app/features/dashboard-scene/solo/SoloPanelPageLogo.test.tsx

@@ -33,7 +33,7 @@ global.ResizeObserver = jest.fn().mockImplementation((callback) => {
 });
 
 // Helper function to assign a mock div to a ref
-function assignMockDivToRef(ref: React.RefObject<HTMLDivElement>, mockDiv: HTMLDivElement) {
+function assignMockDivToRef(ref: React.RefObject<HTMLDivElement | null>, mockDiv: HTMLDivElement) {
   // Use type assertion to bypass readonly restriction in tests
   (ref as { current: HTMLDivElement | null }).current = mockDiv;
 }

public/app/features/dashboard-scene/solo/SoloPanelPageLogo.tsx

@@ -8,7 +8,7 @@ import grafanaTextLogoDarkSvg from 'img/grafana_text_logo_dark.svg';
 import grafanaTextLogoLightSvg from 'img/grafana_text_logo_light.svg';
 
 interface SoloPanelPageLogoProps {
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
   isHovered: boolean;
   hideLogo?: UrlQueryValue;
 }

public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx

@@ -44,7 +44,7 @@ export type QueryLibraryContextType = {
     onUpdateSuccess?: () => void,
     onSelectQuery?: (query: DataQuery) => void,
     datasourceFilters?: string[],
-    parentRef?: React.RefObject<HTMLDivElement>
+    parentRef?: React.RefObject<HTMLDivElement | null>
   ) => ReactNode;
 
   /**

public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx

@@ -60,12 +60,7 @@ export function VisualizationSuggestionCard({
 
     content = (
       <button {...commonButtonProps}>
-        {/* to use inert in React 18, we have to do this hacky object spread thing. https://stackoverflow.com/questions/72720469/error-when-using-inert-attribute-with-typescript */}
-        <div
-          style={innerStyles}
-          className={cx(styles.renderContainer, isSelected && styles.selectedSuggestion)}
-          {...{ inert: '' }}
-        >
+        <div style={innerStyles} className={cx(styles.renderContainer, isSelected && styles.selectedSuggestion)} inert>
           <PanelRenderer
             title=""
             data={data}

public/app/features/query/components/QueryEditorRow.tsx

@@ -613,7 +613,7 @@ function SavedQueryButtons(props: {
   onUpdateSuccess?: () => void;
   onSelectQuery: (query: DataQuery) => void;
   datasourceFilters: string[];
-  parentRef: React.RefObject<HTMLDivElement>;
+  parentRef: React.RefObject<HTMLDivElement | null>;
 }) {
   const { renderSavedQueryButtons } = useQueryLibraryContext();
   return renderSavedQueryButtons(