From 481dc3e630b985e7984ae35773cf2e7154f1dd0a Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 15 Dec 2025 15:50:45 +0000
Subject: [PATCH] type fixes in grafana-ui

---
 .../DateTimePickers/TimeRangePicker/hooks.test.tsx    |  2 +-
 packages/grafana-ui/src/components/Input/utils.ts     |  2 +-
 .../grafana-ui/src/components/Menu/hooks.test.tsx     |  2 +-
 .../grafana-ui/src/components/Table/Table.story.tsx   | 11 ++++++++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.test.tsx
index 98d9eb0588a..463998dbb73 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.test.tsx
@@ -13,7 +13,7 @@ describe('useListFocus', () => {
 
   const testid = 'test';
   const getListElement = (
-    ref: RefObject<HTMLUListElement>,
+    ref: RefObject<HTMLUListElement | null>,
     handleKeys?: (event: KeyboardEvent) => void,
     onClick?: () => void
   ) => (
diff --git a/packages/grafana-ui/src/components/Input/utils.ts b/packages/grafana-ui/src/components/Input/utils.ts
index b21aee2d848..0037b826bb0 100644
--- a/packages/grafana-ui/src/components/Input/utils.ts
+++ b/packages/grafana-ui/src/components/Input/utils.ts
@@ -1,6 +1,6 @@
 import { RefObject, useRef } from 'react';
 
-export function useFocus(): [RefObject<HTMLInputElement>, () => void] {
+export function useFocus(): [RefObject<HTMLInputElement | null>, () => void] {
   const ref = useRef<HTMLInputElement>(null);
   const setFocus = () => {
     ref.current && ref.current.focus();
diff --git a/packages/grafana-ui/src/components/Menu/hooks.test.tsx b/packages/grafana-ui/src/components/Menu/hooks.test.tsx
index 7b7e161194f..eee13ad69c2 100644
--- a/packages/grafana-ui/src/components/Menu/hooks.test.tsx
+++ b/packages/grafana-ui/src/components/Menu/hooks.test.tsx
@@ -13,7 +13,7 @@ describe('useMenuFocus', () => {
 
   const testid = 'test';
   const getMenuElement = (
-    ref: RefObject<HTMLDivElement>,
+    ref: RefObject<HTMLDivElement | null>,
     handleKeys?: (event: KeyboardEvent) => void,
     handleFocus?: () => void,
     onClick?: () => void
diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx
index b6c97df317e..e3d5e4b56cc 100644
--- a/packages/grafana-ui/src/components/Table/Table.story.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.story.tsx
@@ -263,7 +263,16 @@ export const Footer: StoryFn<typeof Table> = (args) => {
   );
 };
 
-export const Pagination: StoryFn<typeof Table> = (args) => <Basic {...args} />;
+export const Pagination: StoryFn<typeof Table> = (args) => {
+  const theme = useTheme2();
+  const data = buildData(theme, {});
+
+  return (
+    <DashboardStoryCanvas>
+      <Table {...args} data={data} />
+    </DashboardStoryCanvas>
+  );
+};
 Pagination.args = {
   enablePagination: true,
 };