ref changes compatible with react 18 + react 19

2026-01-14 17:08:28 +00:00
parent 0faab257b1
commit 86fc051c58
36 changed files with 52 additions and 46 deletions
@@ -22,7 +22,7 @@ import { getBarColorByDiff, getBarColorByPackage, getBarColorByValue } from './c
 import { CollapseConfig, CollapsedMap, FlameGraphDataContainer, LevelItem } from './dataTransform';

 type RenderOptions = {
-  canvasRef: RefObject<HTMLCanvasElement>;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
  data: FlameGraphDataContainer;
  root: LevelItem;
  direction: 'children' | 'parents';
@@ -373,7 +373,7 @@ function useColorFunction(
  );
 }

-function useSetupCanvas(canvasRef: RefObject<HTMLCanvasElement>, wrapperWidth: number, numberOfLevels: number) {
+function useSetupCanvas(canvasRef: RefObject<HTMLCanvasElement | null>, wrapperWidth: number, numberOfLevels: number) {
  const [ctx, setCtx] = useState<CanvasRenderingContext2D>();

  useEffect(() => {
@@ -7,7 +7,7 @@ const CAUGHT_KEYS = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Tab'];

 /** @internal */
 export interface UseListFocusProps {
-  localRef: RefObject<HTMLUListElement>;
+  localRef: RefObject<HTMLUListElement | null>;
  options: TimeOption[];
 }

@@ -1,7 +1,7 @@
 import { RefObject, useRef } from 'react';

-export function useFocus(): [RefObject<HTMLInputElement>, () => void] {
-  const ref = useRef<HTMLInputElement>(null);
+export function useFocus(): [RefObject<HTMLInputElement | null>, () => void] {
+  const ref = useRef<HTMLInputElement | null>(null);
  const setFocus = () => {
    ref.current && ref.current.focus();
  };
@@ -6,7 +6,7 @@ const UNFOCUSED = -1;

 /** @internal */
 export interface UseMenuFocusProps {
-  localRef: RefObject<HTMLDivElement>;
+  localRef: RefObject<HTMLDivElement | null>;
  isMenuOpen?: boolean;
  close?: () => void;
  onOpen?: (focusOnItem: (itemId: number) => void) => void;
@@ -22,7 +22,7 @@ interface Props extends Omit<BoxProps, 'display' | 'direction' | 'element' | 'fl
 *
 * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-scrollcontainer--docs
 */
-export const ScrollContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
+export const ScrollContainer = forwardRef<HTMLDivElement | null, PropsWithChildren<Props>>(
  (
    {
      children,
@@ -20,7 +20,7 @@ export interface TableCellTooltipProps {
  field: Field;
  getActions: (field: Field, rowIdx: number) => ActionModel[];
  getTextColorForBackground: (bgColor: string) => string;
-  gridRef: RefObject<DataGridHandle>;
+  gridRef: RefObject<DataGridHandle | null>;
  height: number;
  placement?: TableCellTooltipPlacement;
  renderer: TableCellRenderer;
@@ -463,7 +463,7 @@ export function useColumnResize(
  return dataGridResizeHandler;
 }

-export function useScrollbarWidth(ref: RefObject<DataGridHandle>, height: number) {
+export function useScrollbarWidth(ref: RefObject<DataGridHandle | null>, height: number) {
  const [scrollbarWidth, setScrollbarWidth] = useState(0);

  useLayoutEffect(() => {
@@ -135,7 +135,7 @@ export const Table = memo((props: Props) => {
  // `useTableStateReducer`, which is needed to construct options for `useTable` (the hook that returns
  // `toggleAllRowsExpanded`), and if we used a variable, that variable would be undefined at the time
  // we initialize `useTableStateReducer`.
-  const toggleAllRowsExpandedRef = useRef<(value?: boolean) => void>();
+  const toggleAllRowsExpandedRef = useRef<((value?: boolean) => void) | null>(null);

  // Internal react table state reducer
  const stateReducer = useTableStateReducer({
@@ -14,8 +14,8 @@ import { GrafanaTableState } from './types';
  Select the scrollbar element from the VariableSizeList scope
 */
 export function useFixScrollbarContainer(
-  variableSizeListScrollbarRef: React.RefObject<HTMLDivElement>,
-  tableDivRef: React.RefObject<HTMLDivElement>
+  variableSizeListScrollbarRef: React.RefObject<HTMLDivElement | null>,
+  tableDivRef: React.RefObject<HTMLDivElement | null>
 ) {
  useEffect(() => {
    if (variableSizeListScrollbarRef.current && tableDivRef.current) {
@@ -43,7 +43,7 @@ export function useFixScrollbarContainer(
 */
 export function useResetVariableListSizeCache(
  extendedState: GrafanaTableState,
-  listRef: React.RefObject<VariableSizeList>,
+  listRef: React.RefObject<VariableSizeList | null>,
  data: DataFrame,
  hasUniqueId: boolean
 ) {
@@ -19,7 +19,7 @@ interface EventsCanvasProps {
 }

 export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords, config }: EventsCanvasProps) {
-  const plotInstance = useRef<uPlot>();
+  const plotInstance = useRef<uPlot | null>(null);
  // render token required to re-render annotation markers. Rendering lines happens in uPlot and the props do not change
  // so we need to force the re-render when the draw hook was performed by uPlot
  const [renderToken, setRenderToken] = useState(0);
@@ -140,7 +140,7 @@ export const TooltipPlugin2 = ({

  const [{ plot, isHovering, isPinned, contents, style, dismiss }, setState] = useReducer(mergeState, null, initState);

-  const sizeRef = useRef<TooltipContainerSize>();
+  const sizeRef = useRef<TooltipContainerSize | null>(null);
  const styles = useStyles2(getStyles, maxWidth);

  const renderRef = useRef(render);
@@ -96,7 +96,7 @@ export interface GraphNGState {
 export class GraphNG extends Component<GraphNGProps, GraphNGState> {
  static contextType = PanelContextRoot;
  panelContext: PanelContext = {} as PanelContext;
-  private plotInstance: React.RefObject<uPlot>;
+  private plotInstance: React.RefObject<uPlot | null>;

  private subscription = new Subscription();