From 03de5f59e61cd2597d382f367d60cf2ac829e1cb Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 16 Dec 2025 11:26:27 +0000
Subject: [PATCH] fix @grafana/ui type errors

---
 eslint-suppressions.json                       |  5 -----
 .../components/Combobox/useComboboxFloat.ts    | 18 ++++++++++++++++--
 .../src/components/Select/resetSelectStyles.ts | 18 +++++++++---------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 94a0b4c6b3c..246e50db149 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -763,11 +763,6 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/Select/resetSelectStyles.ts": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/Select/types.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 6
diff --git a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
index f2bf1f968db..950383c6605 100644
--- a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
+++ b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
@@ -1,5 +1,5 @@
 import { autoUpdate, autoPlacement, size, useFloating } from '@floating-ui/react';
-import { useMemo, useRef, useState } from 'react';
+import { CSSProperties, type RefObject, useMemo, useRef, useState } from 'react';
 
 import { BOUNDARY_ELEMENT_ID } from '../../utils/floating';
 import { measureText } from '../../utils/measureText';
@@ -21,7 +21,21 @@ const POPOVER_PADDING = 16;
 
 const SCROLL_CONTAINER_PADDING = 8;
 
-export const useComboboxFloat = (items: Array<ComboboxOption<string | number>>, isOpen: boolean) => {
+interface UseComboboxFloatReturn {
+  inputRef: RefObject<HTMLInputElement | null>;
+  floatingRef: RefObject<HTMLDivElement | null>;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  floatStyles: CSSProperties & {
+    width: number;
+    maxWidth: number;
+    maxHeight: number;
+  };
+}
+
+export const useComboboxFloat = (
+  items: Array<ComboboxOption<string | number>>,
+  isOpen: boolean
+): UseComboboxFloatReturn => {
   const inputRef = useRef<HTMLInputElement>(null);
   const floatingRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
diff --git a/packages/grafana-ui/src/components/Select/resetSelectStyles.ts b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
index 90ac3877c2a..1432c01e1da 100644
--- a/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { CSSObjectWithLabel } from 'react-select';
+import { StylesConfig } from 'react-select';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-export default function resetSelectStyles(theme: GrafanaTheme2) {
+export default function resetSelectStyles(theme: GrafanaTheme2): Partial<StylesConfig> {
   return {
     clearIndicator: () => ({}),
     container: () => ({}),
@@ -13,7 +13,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     groupHeading: () => ({}),
     indicatorsContainer: () => ({}),
     indicatorSeparator: () => ({}),
-    input: function (originalStyles: CSSObjectWithLabel) {
+    input: function (originalStyles) {
       return {
         ...originalStyles,
         color: 'inherit',
@@ -27,7 +27,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     loadingIndicator: () => ({}),
     loadingMessage: () => ({}),
     menu: () => ({}),
-    menuList: ({ maxHeight }: { maxHeight: number }) => ({
+    menuList: ({ maxHeight }) => ({
       maxHeight,
     }),
     multiValue: () => ({}),
@@ -38,7 +38,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     multiValueRemove: () => ({}),
     noOptionsMessage: () => ({}),
     option: () => ({}),
-    placeholder: (originalStyles: CSSObjectWithLabel) => ({
+    placeholder: (originalStyles) => ({
       ...originalStyles,
       color: theme.colors.text.secondary,
     }),
@@ -47,11 +47,11 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
   };
 }
 
-export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | string | undefined) {
+export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | string | undefined): Partial<StylesConfig> {
   return useMemo(() => {
     return {
       ...resetSelectStyles(theme),
-      menuPortal: (base: CSSObjectWithLabel) => {
+      menuPortal: (base) => {
         // Would like to correct top position when menu is placed bottom, but have props are not sent to this style function.
         // Only state is. https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/Menu.tsx#L605
         return {
@@ -60,7 +60,7 @@ export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | stri
         };
       },
       //These are required for the menu positioning to function
-      menu: ({ top, bottom, position }: CSSObjectWithLabel) => {
+      menu: ({ top, bottom, position }) => {
         return {
           top,
           bottom,
@@ -73,7 +73,7 @@ export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | stri
         width: width ? theme.spacing(width) : '100%',
         display: width === 'auto' ? 'inline-flex' : 'flex',
       }),
-      option: (provided: CSSObjectWithLabel, state: any) => ({
+      option: (provided, state) => ({
         ...provided,
         opacity: state.isDisabled ? 0.5 : 1,
       }),