From f604bf6d686d3feec69bf1843ed9d3190ed037eb Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 11 Jul 2023 13:30:16 +0100
Subject: [PATCH] UI/Select: Adjust typing to support extended props (#71211)

---
 packages/grafana-ui/src/components/Select/Select.tsx | 12 ++++++------
 .../grafana-ui/src/components/Select/SelectBase.tsx  |  6 ++++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx
index 8c0ed3d2c9f..d118d9ada33 100644
--- a/packages/grafana-ui/src/components/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.tsx
@@ -12,11 +12,11 @@ import {
   VirtualizedSelectAsyncProps,
 } from './types';
 
-export function Select<T>(props: SelectCommonProps<T>) {
+export function Select<T, Rest = {}>(props: SelectCommonProps<T> & Rest) {
   return <SelectBase {...props} />;
 }
 
-export function MultiSelect<T>(props: MultiSelectCommonProps<T>) {
+export function MultiSelect<T, Rest = {}>(props: MultiSelectCommonProps<T> & Rest) {
   // @ts-ignore
   return <SelectBase {...props} isMulti />;
 }
@@ -26,15 +26,15 @@ export interface AsyncSelectProps<T> extends Omit<SelectCommonProps<T>, 'options
   value?: T | SelectableValue<T> | null;
 }
 
-export function AsyncSelect<T>(props: AsyncSelectProps<T>) {
+export function AsyncSelect<T, Rest = {}>(props: AsyncSelectProps<T> & Rest) {
   return <SelectBase {...props} />;
 }
 
-export function VirtualizedSelect<T>(props: VirtualizedSelectProps<T>) {
+export function VirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectProps<T> & Rest) {
   return <SelectBase virtualized {...props} />;
 }
 
-export function AsyncVirtualizedSelect<T>(props: VirtualizedSelectAsyncProps<T>) {
+export function AsyncVirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectAsyncProps<T> & Rest) {
   return <SelectBase virtualized {...props} />;
 }
 
@@ -43,7 +43,7 @@ interface AsyncMultiSelectProps<T> extends Omit<MultiSelectCommonProps<T>, 'opti
   value?: Array<SelectableValue<T>>;
 }
 
-export function AsyncMultiSelect<T>(props: AsyncMultiSelectProps<T>) {
+export function AsyncMultiSelect<T, Rest = {}>(props: AsyncMultiSelectProps<T> & Rest) {
   // @ts-ignore
   return <SelectBase {...props} isMulti />;
 }
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 419b6ca5a92..c47d9cf3c5c 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -88,7 +88,7 @@ const CustomControl = (props: any) => {
   );
 };
 
-export function SelectBase<T>({
+export function SelectBase<T, Rest = {}>({
   allowCustomValue = false,
   allowCreateWhileLoading = false,
   'aria-label': ariaLabel,
@@ -149,7 +149,8 @@ export function SelectBase<T>({
   isValidNewOption,
   formatOptionLabel,
   hideSelectedOptions,
-}: SelectBaseProps<T>) {
+  ...rest
+}: SelectBaseProps<T> & Rest) {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
 
@@ -376,6 +377,7 @@ export function SelectBase<T>({
         {...commonSelectProps}
         {...creatableProps}
         {...asyncSelectProps}
+        {...rest}
       />
     </>
   );