[v10.0.x] UI/Select: Adjust typing to support extended props (#71369)

UI/Select: Adjust typing to support extended props (#71211)

(cherry picked from commit f604bf6d68)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

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 />;
 }

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -87,7 +87,7 @@ const CustomControl = (props: any) => {
   );
 };
 
-export function SelectBase<T>({
+export function SelectBase<T, Rest = {}>({
   allowCustomValue = false,
   allowCreateWhileLoading = false,
   'aria-label': ariaLabel,
@@ -146,7 +146,8 @@ export function SelectBase<T>({
   isValidNewOption,
   formatOptionLabel,
   hideSelectedOptions,
-}: SelectBaseProps<T>) {
+  ...rest
+}: SelectBaseProps<T> & Rest) {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
 
@@ -365,6 +366,7 @@ export function SelectBase<T>({
         {...commonSelectProps}
         {...creatableProps}
         {...asyncSelectProps}
+        {...rest}
       />
     </>
   );